How to pass extra props to custom cell renderer? v8

[skelawsky]

How in v8 pass props from cell renderer to custom made input?

function cellRenderer({
  columnIndex,
  key,
  rowIndex,
  style,
  rows,
  handleCellSelect,
  scrollToRow,
  scrollToColumn,
}) {
  const cell = rows[rowIndex].getAllCells()[columnIndex];
  return (
    <div
      style={{
        ...style,
        backgroundColor:
          scrollToRow === rowIndex && scrollToColumn === columnIndex
            ? "red"
            : "",
      }}
      key={key}
      onClick={() =>
        handleCellSelect({ scrollToColumn: columnIndex, scrollToRow: rowIndex })
      }
    >
      <div style={{ padding: "4px" }}>
        {flexRender(cell.column.columnDef.cell, cell.getContext())}
      </div>
    </div>
  );
}

 columnHelper.display({
        id: uuidv4(),
        cell: (cell) => <TestInputFromDocs cell={cell} />,
        size: 125,
      }),

[FullstackWEB-developer]

I have same question
Is flexRender only needed for displaying text data in table cells (th and td)?

[CalMlynarczyk]

I believe you are able to pass additional object properties in the second argument to flexRender. I show how to do this in another discussion. However, TypeScript won't allow it because of the type definition of cell.

Edit: One way to handle the type definition issue if you are using TypeScript is to create a custom context type and cast the argument for the cell function:

import { createColumnHelper, CellContext as TanCellContext } from "@tanstack/react-table";

type CellContext<TData extends RowData, TValue> = TanCellContext<
  TData,
  TValue
> & {
  additionalProp: string;
};

type RowType = { myProp: string; };

const columnHelper = createColumnHelper<RowType>();

const columns = [
  columnHelper.accessor("myProp", {
    cell: (info: unknown) => {
      const infoCasted = info as CellContext<RowType, string>;
      return <p>{infoCasted.getValue()}: {infoCasted.additionalProp}</p>;
    },
  }),
];

[evbo]

@mdaverde I was unclear. The "messy" part with passing props down is you have to do a merge with tanstack props. useContext has been my preferred approach because it keeps me isolated.

The only downside I can think of to the useContext approach is it's much harder to prevent re-rendering due to changes in context. For instance, with Props you could always use React.memo to avoid re-rendering due to a trivial change. The workarounds are of course documented in React's issues for this.

[mozzius]

An alternative to casting is to declare

declare module "@tanstack/react-table" {
  interface CellContext<TData extends RowData, TValue> {
    additionalProp: string;
  }
}

[israrkhan002n]

@CalMlynarczyk Can u add a more detail code for your implementation

[CalMlynarczyk]

@israrkhan002n The only other code that relates to this is in my other linked post about how to pass the row fields to the flexRender function.

const [rowState, setRowState] = useState({additionalProp: ""});

return row.getVisibleCells().map((cell) => (
  <td key={cell.id}>
    {flexRender(cell.column.columnDef.cell, {
      ...cell.getContext(),
      rowState,
    })}
  </td>
));

[LordLovelysmell]

@CalMlynarczyk the main trouble here is that the whole list of <td>s would be re-rendered due to the prop change. And in my case I cannot smoothly transition to a new style because the Cell component completely remounts.

I wanted to use useState to know if tr is hovered by user and pass that prop to the Cell using flexRender as you mentioned (because I use css-modules and it's impossible to restyle nested children components from parent perspective), but the whole concept of mine seems to be undoable.

[devakrishna33]

For anyone else looking for a different way, the package exposes an argument called "meta" which can be extended. Please check here,
https://tanstack.com/table/v8/docs/api/core/column-def#meta

[acomms]

I'm not sure what you mean. You set the meta on the table when calling useReactTable. All instances of that table would have the meta, but not other tables in your app.
https://tanstack.com/table/v8/docs/api/core/table#meta

[Mangor1no]

As the document has mentioned: This type is global to all tables and can be extended like so. I'm assuming that the meta will be accessible for all tables, not just the current table instance. Maybe I'm wrong, idk. Will check it when I have the time.

[mdrahiem]

You can just pass meta in the columnDef and its not available for all tables but only for the table where the columns are being used.

const table = useReactTable({
    data: data ?? [],
    columns
  })
  
 columnHelper.accessor('rating', {
    header: () => <div>Rating</div>,
    enableSorting: true,
    cell: cell => {
       return <div onClick={() => setShowModal(true)}>cell.getValue()</div>
    },
    meta: {
      setShowModal // this is from the useState
    }
  })

[Oize]

The data is not available but the type is. The fact that this meta thing is defined globally instead of being a simple generic to createColumnHelper function is the reason I have to store this data out of the table definitions.

[MorningLit]

Yea I agree with the comment above, unfortunately not sure why is meta made to be global for all tables 🙁

I think another solution is to create a useContext and wrap it around the table? Not the prettiest but I think it's the most "correct"

[nextheme]

I ended up using react's useContext() to access my data inside the target component

[mantysalo]

Here's how I solved this without context or extra type declarations:

Define the columns inside a function which accepts params and pass those along to your custom cell component

const createColumns = ({ onActionClick }: { onActionClick: () => void }) =>
  [
   <..other column definitions..>
    {
      id: "actions",
      cell: ({ row }) => {

        return (
          <button onClick={onActionClick}>Edit</button>
        );
      },
    },
  ] satisfies ColumnDef<YourTableDataType>[];

Call the function in your component and pass the params you want

const YourComponent = () => {
  const [state, setState] = useState()
  // Would probably be good to wrap this in useMemo
  const columns = createColumns({onActionClick: () => setState(true)})
  
  const table = useReactTable({
    columns
    ...
   })
   
   ...
}