T
TanStack•2mo ago
multiple-amethyst

Override table.defaultColumn’s custom cell renderer at the column-definition level.

I have a table to which I pass a defaultColumn option with a default cell render. In this simplified example I'm just making it so that each value is rendered as a red div. But then, in certain cases, I want to wrap this default cell render with my own component to extend it. But I can't figure out a clean and good way to do this. Essentially what I want to achieve is this: 
const defaultColumn: Partial<ColumnDef<any>> = {
    cell: (cellProps) => {
      return <div style={{ color: 'red' }}>{cellProps.getValue() as string}</div>;
    },
  };
  
  const columns = useMemo(
    () => [
      columnHelper.accessor('foo.bar', {
        header: 'Bar',
        cell: (props) => {
          return (
            <div>
              {props.column.renderDefault(props.cell.getContext())} <--- Is this possible somehow? I want this to be the default cell renderer.
              Very cool wrapper
            </div>
          );
        },
      }),
    ],
    []
  );


  const table = useReactTable({
    data,
    columns,
    defaultColumn,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  });
const defaultColumn: Partial<ColumnDef<any>> = {
    cell: (cellProps) => {
      return <div style={{ color: 'red' }}>{cellProps.getValue() as string}</div>;
    },
  };
  
  const columns = useMemo(
    () => [
      columnHelper.accessor('foo.bar', {
        header: 'Bar',
        cell: (props) => {
          return (
            <div>
              {props.column.renderDefault(props.cell.getContext())} <--- Is this possible somehow? I want this to be the default cell renderer.
              Very cool wrapper
            </div>
          );
        },
      }),
    ],
    []
  );


  const table = useReactTable({
    data,
    columns,
    defaultColumn,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  });
Any ideas/suggestions would be very appreciated!
1 Reply
multiple-amethyst
multiple-amethystOP•2mo ago
I suppose this could work: 
columnHelper.accessor('foo.bar', {
  header: 'Bar',
  cell: (props) => {
    return <div>{defaultColumn.cell(props.cell.getContext())} Very cool wrapper!</div>;
  },
}),
columnHelper.accessor('foo.bar', {
  header: 'Bar',
  cell: (props) => {
    return <div>{defaultColumn.cell(props.cell.getContext())} Very cool wrapper!</div>;
  },
}),
But ideally there's a way to do this without needing access to defaultColumn at the time of defining columns Doing this works I suppose. Is this the recommended approach? 
function renderDefaultCell(ctx: CellContext<unknown, unknown>) {
  return <div style={{ color: 'red' }}>{ctx.getValue() as string}</div>;
}

const columns = useMemo(
  () => [
    columnHelper.accessor('foo.bar', {
      header: 'Bar',
      cell: (props) => {
        return (
          <div>
            {props.cell.column.columnDef.meta?.defaultRender(props.cell.getContext())} very cool wrapper!
          </div>
        );
      },
    }),
  ],
  []
);

const table = useReactTable({
  data,
  columns,
  defaultColumn: {
    cell: renderDefaultCell,
    meta: { defaultRender: renderDefaultCell },
  },
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
});
function renderDefaultCell(ctx: CellContext<unknown, unknown>) {
  return <div style={{ color: 'red' }}>{ctx.getValue() as string}</div>;
}

const columns = useMemo(
  () => [
    columnHelper.accessor('foo.bar', {
      header: 'Bar',
      cell: (props) => {
        return (
          <div>
            {props.cell.column.columnDef.meta?.defaultRender(props.cell.getContext())} very cool wrapper!
          </div>
        );
      },
    }),
  ],
  []
);

const table = useReactTable({
  data,
  columns,
  defaultColumn: {
    cell: renderDefaultCell,
    meta: { defaultRender: renderDefaultCell },
  },
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
});

Did you find this page helpful?