How can I trigger a column to rerender based on an external state?

[hcheng-ae]

Hello! I would like to make a table (or a column of the table) rerender when an external state is changed. For example, the external state can be the date format (eg, YYYY-MM-DD, MM/DD/YYYY) selected by a user. When that state is changed, the value displayed in a column should be updated accordingly. However, the following code didn't work.

Any help is appreciated. Thank you!

Example:

import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
import * as React from 'react';
import { useMemo, useState } from 'react';

interface Person {
  name: string;
  email: string;
}

const data: Person[] = [
  { name: 'John', email: 'john@example.com' },
  { name: 'Joe', email: 'joe@example.com' },
];

enum FormatOption {
  OPTION_A = '[A]',
  OPTION_B = '[B]',
}

export default function App() {
  const [format, setFormat] = useState(FormatOption.OPTION_A);

  const columns = useMemo<MRT_ColumnDef<Person>[]>(() => {
    return [
      {
        accessorKey: 'name',
        header: 'Name',
      },
      {
        accessorFn: (row) => `${row.email} ${format}`,
        id: 'email',
        header: 'Email',
      },
    ];
  }, [format]);

  return (
    <div>
      <div>
        <button
          onClick={() => {
            setFormat(FormatOption.OPTION_A);
          }}
        >
          Use Format Option A
        </button>
      </div>
      <br />
      <div>
        <button
          onClick={() => {
            setFormat(FormatOption.OPTION_B);
          }}
        >
          Use Format Option B
        </button>
      </div>
      <br />
      <div>Selected Format Option: {format}</div>
      <br />
      <MaterialReactTable columns={columns} data={data} />
    </div>
  );
}

Stackblitz link: https://stackblitz.com/edit/stackblitz-starters-pf1rwk?file=src%2FApp.tsx

[hcheng-ae]

I just figured it out. It seems that in this case, I should use Cell instead of accessorFn. The following column defintion works for me:

  const columns = useMemo<MRT_ColumnDef<Person>[]>(() => {
    return [
      {
        accessorKey: 'name',
        header: 'Name',
      },
      {
        accessorKey: 'email',
        header: 'Email',
        Cell: ({ cell }) => `${cell.getValue<string>()} ${format}`,
      },
    ];
  }, [format]);