Generic Table component with passed table and columns

[tar-aldev]

I am trying to create a generic table component.
I want to keep definition of the columns and table creation outside of it.

So, let's say I have this

const table = createTable()
      .setRowType<DataEntry>()
      .setColumnMetaType<{ renderFilter: () => ReactElement }>();

Then I create some columns using the table from above code.

const columns = table.createDataColumn(
  [
     table.createDataColumn(({ customer }) => customer?.fullName, {
          id: 'customer.fullName',
          header: 'Customer',
          cell: ({ getValue }) => getValue()
        }),
     ...
     
  ]
)

Then I do

<Table  <--- generic table component
  table={table}
  columns={columns}
/>

It all goes well, until I am trying to type anything in generic Table component. Because I added some custom meta to column and I need to pass type for data I am unsure what's the best way.

I tried creating a type like

RTTable<
  {
    ColumnMeta: {
      renderFilter: () => ReactElement;
    };
    Row: R,
  }
  & ReactTableGenerics
>

But then it looks like I have to duplicate a bunch of types in place where I create columns and table and in generic table component. I see no other way, because I cannot find any exported types I could use?
I obviously cannot just do

const table = createTable();
const enhancedTable = table as RTTable<
  {
    ColumnMeta: {
      renderFilter: () => ReactElement;
    };
    Row: R,
  }
  & ReactTableGenerics
>>

because it will give typescript errors for type conversion...

Tbh it looks like a huge overhead compared to v7, where I could just pass data type and it worked.

[tar-aldev]

I ended up doing this:
In my abstract table component

export type ColumnMeta<R> = {
  renderFilter?: (column: Column<Generics<R>>) => ReactElement;
  cellProps?: TableCellProps;
};

export const createTableWithFilters = <R,>() =>
  createTable().setColumnMetaType<ColumnMeta<R>>().setRowType<R>();

export interface Generics<R> extends ReactTableGenerics {
  ColumnMeta: ColumnMeta<R>;
  Row: R;
}

interface TableProps<R> extends MUITableProps {
  columns: UseTableInstanceOptions<Generics<R>>['columns'];
  table: RTTable<Generics<R>>;
  data: R[];
  loading?: boolean;
}

export const Table = <R,>({
  columns,
  table,
  data,
  ...props
}: TableProps<R>) => {
  const { getRowModel, getHeaderGroups } = useTableInstance<Generics<R>>(
    table,
    {
      data,
      columns,
      getCoreRowModel: getCoreRowModel()
    }
  );
...

// in hook
const table = createTableWithFilters<Data>();

    return {
      table,
      columns: [
        table.createDataColumn(
          ({ session }) => session?.name,
          {
            id: 'sessionName',
            header: 'Session',
            cell: ({ getValue }) => {
              const sessionName = getValue();
              return sessionName === RegistrationStatus.Unregistered ? (
                <div style={{ color: 'red' }}>(cancelled)</div>
              ) : (
                sessionName
              );
            },
            // custom filter defined in ColumnMeta
            meta: {
              renderFilter: (props) => {
                return <TextFilter {...props} />;
              }
            }
          }
        ),

// usage
<Table<Data>
      columns={columns}
      table={table}
      data={mockData}
      loading={false}
    />

It seems to work pretty good. Unless I miss something. It also gives autocomplete as expected.

[pstoica]

Agreed with the overhead, it feels like some type factories should be provided for user-land. Thanks @tar-aldev, your example worked great!