Material React Table: column value is different from the actual display string, but search/filter with the corresponding display string

Question

I am using Material React Table to display data. (Material React Table (MRT) is a fully-featured data grid/table component library for React built on TanStack Table V8's powerful API.)

In the columns, there is one named 'status':

Now, the status value of the data that is loaded into the table must be one of the following: ['NEW', 'INPROGRESS', 'READY', 'DONE'] ;

However, we want to display not the plain status value, but its corresponding display text string in another language.

const statusTranslation = {
    'NEW': '新的任务',
    'INPROGRESS': '进行中',
    'READY': '准备',
    'DONE': '完成',
}


  const columns = useMemo(
    () => [
     
     ..., 

      {
        header: '依頼進捗',
        accessorKey: 'status',
        size: 70,
        filterVariant: 'autocomplete',
        // filterSelectOptions: statusList,
        enableColumnFilter: false,
        enableColumnActions: false,
        //custom conditional format and styling
        Cell: ({ cell }) => {
          const status = cell.getValue();
          return <Status>{statusTranslation(status)}</Status>;
        },
      },

    ...,

    ],
    []
  );


  const table = useMaterialReactTable({
    columns,
    data, 
    enableColumnFilterModes: true,
    ...
  })

Now, the tricky part is:

we want to be able to filter the table data by the status column values;

we want to choose the filter option, or type the filter string in the display languange

How can we do it?