editSelectOptions values and labels

[sgjohnston]

I'm in the process of evaluating changing from MUIX DataGrid to Material React Table, and I'm struggling a bit with a select input for editing a cell. I'm using editDisplayMode = "row", although I don't think this is important. The basic scenario is a select, with values, and localised labels. So far, I have two scenarios:

1. Just use an accessorKey for the column, however since it is the value (rather than the localised label) in the data, this is rendered in non-edit mode as the value. When I edit the row, it works perfectly - the localised labels are in the select, and on save I get the value back from the cell. So the issue here is the display in non-edit mode.

2. Use an accessorFn to map from the value in the data to the rendered value. This works fine for non-edit mode. However, when editing the row, the select is initialised with the label, not the value - which causes a React error, and on save the value extracted from the cell is actually the label.

The problem is demonstrated quite well by the example at https://www.material-react-table.dev/?path=/story/features-editing-examples--edit-select-variant-alternate. This uses the full state name as the value, but when editing it is rendered as the state abbreviation (the label). I would want to always see the label.

Any thoughts on this? I can work around it by using my option 2, and converting the label to value on save, but this seems unnecessarily unpleasant.

thanks,
Stuart

[sgjohnston]

I ended up solving this by essentially re-implementing packages/material-react-table/src/components/inputs/MRT_EditCellTextField.tsx to change the initialisation of the selector. I changed line 44 from
const [value, setValue] = useState(() => cell.getValue<string>());
to
const [value, setValue] = React.useState(row.original[column.id]);
This is the only change required, it could be great if there was a column option to allow this rather than re-implmenting the whole component.