proper way to add custom function and extend meta

[vatoer]

objective:
create a custom input textarea and save on blur

so

const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    onSortingChange: setSorting,
    getSortedRowModel: getSortedRowModel(),
    onColumnFiltersChange: setColumnFilters,
    onGlobalFilterChange: setGlobalFilter,
    getFilteredRowModel: getFilteredRowModel(),
    onRowSelectionChange: setRowSelection,
    state: {
      sorting,
      columnFilters,
      globalFilter,
      rowSelection,
    },
    meta: {
      updateData: (rowIndex: number, columnId: string, value: string) => {
        setData((old) =>
          old.map((row, index) => {
            if (index === rowIndex) {
              return {
                ...old[rowIndex],
                [columnId]: value,
              };
            }
            return row;
          })
        );
      },

in my cell component

interface ITableCellProps {
  getValue: () => any;
  row: Row<any>;
  column: Column<any>;
  table: Table<any>;
}
export const TableCell = ({
  getValue,
  row,
  column,
  table,
}: ITableCellProps) => {
  const initialValue = getValue();
  const [value, setValue] = useState("");

  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

  const onBlur = () => {
    if (
      table.options.meta &&
      typeof table.options.meta.updateData === "function"
    ) {
      (table.options.meta.updateData as Function)(row.index, column.id, value);
    } else {
      console.error("updateData method is not available");
    }
  };

on TableCell it keep getting Property 'updateData' does not exist on type 'TableMeta<any>'.ts(2339)

I tried https://tanstack.com/table/v8/docs/api/core/table#meta

and declare in my types

declare module "@tanstack/table-core" {
  interface TableMeta<TData extends RowData> {
    updateData?: (rowIndex: number, columnId: string, value: string) => void;
    toggleAllBoolean?: (columnId: string, value: boolean) => void;
    changeAllOptions?: (columnId: string, value: string | number) => void;
    getIsAllTrue?: (columnId: string) => boolean;
    getIsSomeTrue?: (columnId: string) => boolean;
  }
}

but then I got a bunch of error

Module '"@tanstack/react-table"' has no exported member  ColumnDef,
  ColumnFiltersState,
  SortingState,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,

so, to properly add custom function table?

Thanks

[vatoer]

my bad it should be "@tanstack/react-table"

- declare module "@tanstack/table-core" {
+ import { RowData } from "@tanstack/react-table";
+ declare module "@tanstack/react-table" {
  interface TableMeta<TData extends RowData> {
    updateData?: (rowIndex: number, columnId: string, value: string) => void;
    toggleAllBoolean?: (columnId: string, value: boolean) => void;
    changeAllOptions?: (columnId: string, value: string | number) => void;
    getIsAllTrue?: (columnId: string) => boolean;
    getIsSomeTrue?: (columnId: string) => boolean;
  }
}

[stychu]

Ahh such an obvious thing yet I caught myself on to it too.... @tannerlinsley worth mentioning in docs ;)

[tjunghans]

This solution works until you have more than one table and need to repeat the above but with different methods. The declare module block is global.

[zarocknc]

This solution works until you have more than one table and need to repeat the above but with different methods. The declare module block is global.

you can merge/force the TableMeta declaration like the example on tableModels.tsx

• https://tanstack.com/table/latest/docs/framework/react/examples/kitchen-sink