Column Def type issue

[Victor-Varghese]

Hi,

I'm trying to build a custom reusable table component that accepts props and return table. The component accepts following props and make use of useReactTable to render the table. Generic component

interface Props<T> {
  gridId: string;
  data: T[];
  loading?: boolean;
  columns: ColumnDef<T>[];
  height: string;
  enableMultiRowSelection?: boolean;
  enableColumnResizing?: boolean;
...otherProps
}

const table = useReactTable({
    data,
    columns: columns,
    state: {
      sorting: checkForHiddenColumnSorting,
      rowSelection,
      columnFilters: checkForHiddenColumnFilters,
      globalFilter,
    },
    defaultColumn: {
      filterFn: 'arrIncludesSome',
    },
    columnResizeMode,
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    onRowSelectionChange: setRowSelection,
    onGlobalFilterChange: setGlobalFilter,
    globalFilterFn: fuzzyFilter,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getFacetedRowModel: getFacetedRowModel(),
    getFacetedUniqueValues: getFacetedUniqueValues(),
    getFacetedMinMaxValues: getFacetedMinMaxValues(),
    enableSorting,
    enableMultiRowSelection,
    enableColumnResizing,
    enableColumnFilters,
    isMultiSortEvent: (e: unknown) => {
      if ((e as React.MouseEvent<HTMLElement>).metaKey) {
        return true;
      }
      return false;
    },
  });

But this is throwing type error. Can some help ?

@tannerlinsley @KevinVandy any work around / fixes?

[chiptus]

try doing useReactTable<T>

[bostrom]

@Victor-Varghese did you find a solution for this?

[pauliusef]

@Victor-Varghese, @bostrom please try a following change to your setup:

interface P<T extends {} = {}> {
  data: T[];
  columns: ColumnDef<T, any>[];
}

const Table = ({ columns, data }: P) => {
  const t = useReactTable<typeof data[number]>({
    data,
    columns,
    getCoreRowModel: getCoreRowModel()
  });

  return null;
};

Here I do provide the type of entry based of data to useReactTable - useReactTable<typeof data[number]>. This works if data is an array of certain type objects.

[bostrom]

Thanks, this got me on the right track!

[Victor-Varghese]

I think i used a workaround. not sure if this is okay.

interface {
  columns: Column<T>[];
}

and then typecasted columns in props

const columns: ColumnDef[] = [
{
id: 'id',
accessorKey: 'id',
cell: (info) => <DefaultCellText text={info.getValue() as string} isResizing={info.column.getIsResizing()} />,
header: 'Date',
size: 180,
filterFn: CustomFilterFns.isStringSelected,
},
]

columns={columns as Column<DataType>[]}

[bostrom]

Thanks! I went for a solution without casting after all.

[rishavpandey43]

Hi Everyone,

I'm new to react-table and have little experience with Typescript.

Would anyone be able to help me with this?

Table.tsx -

import { Fragment, memo } from 'react';
import {
  useReactTable,
  getCoreRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  ColumnDef,
  flexRender,
} from '@tanstack/react-table';
import {
  TableContainer,
  Table as MuiTable,
  TableBody,
  TableHead,
  TableRow,
  TableCell,
  TableFooter,
  styled,
  TableProps as MuiTableProps,
} from '@mui/material';

import { TableSkeleton } from '../Skeletons';
import LoadMoreButton, { LoadMoreButtonProps } from './LoadMoreButton';
import ErrorScreen from '../ErrorScreen';
import { ApolloError } from '@apollo/client';

export interface TableProps<T extends object>
  extends LoadMoreButtonProps,
    MuiTableProps {
  id?: string;
  loading?: boolean;
  error?: ApolloError | string;
  data?: T[];
  columns: ColumnDef<T>[];
  rowOnClick?: (rowItem: T) => void;
}

export const StyledTableContainer = styled(TableContainer)(({ theme }) => ({
  height: '100%',
  padding: '10px',
  border: '1px solid',
  borderColor: theme.palette.grey['50'],
  borderRadius: theme.spacing(2),
  backgroundColor: theme.palette.common.white,
}));

const Table = <T extends object>({
  loading,
  error,
  data = [],
  columns,
  pagination,
  loadMore,
  rowOnClick,
  ...rest
}: TableProps<T>) => {
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    manualPagination: true,
  });

  if (loading) return <TableSkeleton rowCount={10} columnCount={5} />;
  if (error)
    return (
      <ErrorScreen title={typeof error === 'string' ? error : error.message} />
    );

  return (
    <StyledTableContainer>
      <MuiTable {...rest}>
        <TableHead>
          {table.getHeaderGroups().map(headerGroup => {
            return (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map(header => (
                  <TableCell key={header.id} colSpan={header.colSpan}>
                    {flexRender(
                      header.column.columnDef.header,
                      header.getContext(),
                    )}
                  </TableCell>
                ))}
              </TableRow>
            );
          })}
        </TableHead>
        <TableBody>
          {table.getRowModel().rows.map(row => (
            <TableRow key={row.id}>
              {row.getVisibleCells().map(cell => (
                <Fragment key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </Fragment>
              ))}
            </TableRow>
          ))}
        </TableBody>
        {loadMore && (
          <TableFooter>
            <TableRow>
              <TableCell
                colSpan={table.getHeaderGroups()[0].headers.length}
                sx={{ border: 'none' }}
              >
                <LoadMoreButton
                  dataCount={data.length}
                  pagination={pagination}
                  loadMore={loadMore}
                />
              </TableCell>
            </TableRow>
          </TableFooter>
        )}
      </MuiTable>
    </StyledTableContainer>
  );
};

export default memo(Table);

Usage-

<Table
      loading={
        payRunListForTableQueryLoading &&
        !payRunListForTableQueryData?.getPayRunList.pagination.currentPage
      }
      error={payRunListForTableQueryError}
      columns={columns}
      data={payRunListForTableQueryData?.getPayRunList.data}
      loadMore={{
        onClick: loadMoreData,
        loading: payRunListForTableQueryLoading,
      }}
      pagination={payRunListForTableQueryData?.getPayRunList.pagination}
    />

I created column with this method - const columnHelper = createColumnHelper<PayRunDetailFragmentFragment>();

While using columns={columns}
This is the error -