Creating a Custom Cell Renderer in TanStack Table

Shows how to create and use a custom cell renderer in TanStack Table for customizing the display of data in a table cell.
import { useTable } from '@tanstack/react-table';
Import useTable hook from @tanstack/react-table to create and manage the table instance.
const data = React.useMemo(() => [{ colValue: 'example' }], []);
Define the data for the table using useMemo for performance optimization. This example uses a single row for simplicity.
const columns = React.useMemo(() => [
    accessorKey: 'colValue', // accessor is the "key" in the data
    cell: (info) => <strong>{info.getValue()}</strong>,
], []);
Define the columns for the table. The 'accessorKey' specifies the key to access the value from each row object. The 'cell' property is used to define a custom renderer, which in this case wraps the value in a <strong> tag.
const MyTable = () => {
  const {
  } = useTable({ columns, data });

  return (
    <table {...getTableProps()}>
      <tbody {...getTableBodyProps()}>
        { => {
          return (
            <tr {...row.getRowProps()}>
              {row.getVisibleCells().map(cell => (
                <td {...cell.getCellProps()}>{cell.renderCell()}</td>
Defines the MyTable component which uses the useTable hook to create a table instance. It renders a table with a single row and a custom cell that renders the cell value inside a <strong> tag using the custom renderer defined in the columns.