Custom Table and props

[stychu]

Hi, I want to have a custom table build on top of the tanstack table but I struggle a little bit with types of the props. Should I go with a route where I set the table inside the BaseTable and pass props to it or the other way set the table in the parent component and use pass the table as a prop ???

I tried the 1st option where I set the table in BaseTable component and pass respective props to it. But typing some options from Tanstack table is not an easy task for me.

Here's what I have so far.

'use client';

import { useMemo, useState } from 'react';

import {
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  useReactTable,
} from '@tanstack/react-table';

import { Skeleton } from '$/components/Skeleton';
import { Pagination } from '$/components/tables/base/Pagination';
import { PAGE_SIZES } from '$/components/tables/base/utils';
import { cn } from '$/lib/utils';

import type { ColumnDef, PaginationState } from '@tanstack/react-table';

type BaseTableProps<T extends object> = {
  data: T[];
  columns: ColumnDef<T>[];
  isInitialLoading: boolean;
  isDataFetching: boolean;
};

export const BaseTable = <T extends object>({
  data,
  columns,
  isDataFetching,
  isInitialLoading,
}: BaseTableProps<T>) => {
  const tableData = useMemo(
    () => (isInitialLoading ? (Array(PAGE_SIZES[0]).fill({}) as T[]) : data),
    [isInitialLoading, data],
  );
  const tableColumns = useMemo(
    () =>
      isInitialLoading
        ? columns.map((col) => ({
            ...col,
            cell: () => <Skeleton />,
          }))
        : columns,
    [isInitialLoading, columns],
  );
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: PAGE_SIZES[0],
  });
  const table = useReactTable({
    data: tableData,
    columns: tableColumns,
    state: {
      pagination,
    },
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    onPaginationChange: setPagination,
  });

  return (
    <div>
      <div className="overflow-auto max-h-[503px] h-[503px] border-x-2 border-b-2 bg-white">
        <table
          className="text-left w-full bg-white border-separate border-spacing-0"
          aria-busy={isDataFetching}
        >
          <thead className="sticky top-0 bg-gray-300">
            <tr>
              {table.getFlatHeaders().map((header) => {
                return (
                  <th
                    key={header.id}
                    colSpan={header.colSpan}
                    className="p-3 border-y-2 border-r whitespace-nowrap"
                  >
                    {flexRender(
                      header.column.columnDef.header,
                      header.getContext(),
                    )}
                  </th>
                );
              })}
            </tr>
          </thead>
          <tbody>
            {table.getCoreRowModel().rows.length ? (
              table.getRowModel().rows.map((row) => {
                return (
                  <tr
                    id={row.id}
                    key={row.id}
                    className={cn(
                      parseInt(row.id.split('.')[0]!) % 2 && 'bg-gray-100',
                    )}
                  >
                    {row.getVisibleCells().map((cell) => (
                      <td
                        key={cell.id}
                        className="p-3 border-y whitespace-nowrap"
                      >
                        {flexRender(
                          cell.column.columnDef.cell,
                          cell.getContext(),
                        )}
                      </td>
                    ))}
                  </tr>
                );
              })
            ) : (
              <tr className="text-center">
                <td
                  colSpan={table.getAllFlatColumns().length}
                  className="h-[450px] text-4xl text-gray-400"
                >
                  No results found
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
      <Pagination table={table} isLoading={isInitialLoading} />
    </div>
  );
};

This is almost perfect what I need at least for now. One thing is missing is that I want a Tanstack state to be a prop of my BaseTable. Pagination property should not be touched but rest of the state should be able to be passed from parent. How I can type this??