T
TanStack•5mo ago
fair-rose

How to make reusable columns

Hello, i'm facing a bit of a problem trying to make my own column helper type deal since a lot of my headers are reused or are slight variations of each other. I can't seem to make a function with generics that I could then customize: 
export type ColumnData<TData extends RowData> = {
  key: DeepKeys<TData>;
};

function createColumn<TData extends RowData>(
  columnData: ColumnData<TData>
): ColumnDef<TData> {
  const helper = createColumnHelper<TData>();

  return helper.accessor(columnData.key, {});
}
export type ColumnData<TData extends RowData> = {
  key: DeepKeys<TData>;
};

function createColumn<TData extends RowData>(
  columnData: ColumnData<TData>
): ColumnDef<TData> {
  const helper = createColumnHelper<TData>();

  return helper.accessor(columnData.key, {});
}
But even this very minimal example has type isues, it won't accept the empty object (even though it does normally) and also doesn't think the return value is a ColumnDef<TData>. To me it looks like TData is not defined well enough so it doesn't like it. Maybe there is a better way to reuse column definitions that I'm not aware of
1 Reply
fair-rose
fair-roseOP•5mo ago
I ended up finding a nice compromise by typing the second parameter of .accessor as as DisplayColumnDef<TData> it's not perfect but for my use case it seems to work

Did you find this page helpful?