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

TanStack•12mo ago•

2 replies

continuing-aqua

How to make reusable columns

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, {});
}

How to make reusable columns

Similar Threads

How to make reusable columns

Similar Threads

Similar Threads

Similar Threads