dynamic editSelectOptions list

[tttp]

Hi,

I'd like to be able to have a different list of options available on an editVariant: select, is this an option I'm missing?

example:

on an editable (per cell or row), I have two columns, country and state

if country = US, the list of options for state should be alaska, alabama...
if country = CA, the list for state should be different, is there a way to populate the list of options when clicking on the drop down? (eg editSelectOptions being a function instead of an array?)

any other suggestion to achieve that?

[KevinVandy]

This is supposed to already be supported. Check the dependency arrar of your column definitions if using useMemo

[tttp]

thanks, I tried but the problem is that if the current value is not in the editSelectOptions, it isn't displayed.

so say I have as main data:

[{name:Jean, country:fr, city: Paris},
{name:hans,country:de, city: Bonn}]

cities = { "de": ["Bonn","Berlin","Hamburg"],
"fr": ["Paris", "Marseille", "Brest"]]

with a column

{accessorKey:"city",
editVariant:"select",
editSelectOptions: contextualCities
}

so the aim is to have contextualCities = cities["fr"] for Jean and cities["de"] for Hans

and the problem I face is that if I put the contexttualCities to fr, Hans column will be empty

may be the issue is that the value is not displayed if it isn't in the editSelectOptions?

[loughlinclaus3]

I second this issue; I'm having some trouble getting a row's cell to rerender it's dropdown values based off of changes in another cell in the same row during a editDisplayMode: "table". I've managed to get it working for editDisplayMode: "row" by controlling the editingRow state, and having the onEditingRowChange table option manually update the editRow state, but that doesn't solve it for bulk edits issue that I'm having.

Using your example as a base, for the dynamic lookup to work in editDisplayMode: "row", (and, I suppose it'd work for table, if you don't allow users to modify their contry) you'd need (in addition to the things mentioned above):

• a helper function: function getValue(row, field) { return row?._valuesCache?.[field] ?? row?.original?.[field]; } (this is really only needed if you want to dynamically change based off of edits made to country cell during a rowEdit, otherwise you can go straight for row?.original?.[field])
• a custom muiTextEditFieldProps column option for your city (you'll need to delete your editSelectOptions value, as that would overwrite this): muiTextEditFieldProps: ({row}) => ({children: cities[getValue(row, "country")].map(city => (<MenuItem key={city} value={city}>{city}</MenuItem>))}) (if you want the material-react-table's predefined styles for the MenuItem, see their sx here)

I'll keep looking to see if I can find a way to dynamically change based of country alterations when in table edit mode.

I will say that I feel that the editSelectOptions would be better served by making the row's data accessible by taking a function as input (i.e. editSelectOptions: ({row}) => OptionsArray) as opposed to only accepting a single array of options that is the same for all values in a column. But for that to work, the material-react-table package itself would likely need to be changed so that cell edits re-render their entire row, instead of just the cell that was edited.

[KevinVandy]

I have had this example showing that dynamically loaded edit select options is already possible if you get your column definition's memoization correct: https://www.material-react-table.dev/?path=/story/fixed-bugs-useeffects--edit-options-async

But I like the idea of making editSelectOptions a callback for a row by row / cell by cell basis.

Changing the type to this in the next version, probably releasing in a few hours @loughlinclaus3

  editSelectOptions?:
    | ((props: {
        cell: MRT_Cell<TData, TValue>;
        column: MRT_Column<TData>;
        row: MRT_Row<TData>;
        table: MRT_TableInstance<TData>;
      }) => DropdownOption[])
    | DropdownOption[];

[loughlinclaus3]

@KevinVandy, while this is a good example (and the new callback VERY helpful to me), I don't think it fully covers the scenario that tttp and I were trying to fulfill. Lets say that every row has 2 editable columns, country and cities, both are dropdowns, and the city's dropdown options are dependent on their row's selected country value. (i.e. a row with its country set to "de" has the dropdown options of ["Bonn","Berlin","Hamburg"], and another row that has its country set to "fr" has the dropdown options of ["Paris", "Marseille", "Brest"]). With the newly implemented callback, you can have the city's dropdown values initially match their associated country (once again, I love this new addition, since it no longer requires users to go through muiTextEditProps).

However, lets say the user is in "table" editDisplayMode, and decides to change a row's country from "fr" to "de". While the country cell will re-render to display the new value, the row's "city" cell would still display a city from the "fr" list and the city's dropdown values would also still be associated with "fr", as the country onChange does not re-render the associated row. The city cell would only re-render once a user fires the onChange of the city, at which point the city field would likely blank out, and the city dropdown values would be updated to match the country's list for the next time the dropdown is opened.

I think a good fix for this would be to have the table re-render the edit views of the row containing the modified cell, instead of just the modified cell (or, at maybe give the user the option to choose how much to re-render, if you feel the re-render of the entire row is too costly to be the default).

[KevinVandy]

I think there's plenty of ways to accomplish that scenario, and I don't see what additional API MRT would need to provide here? You can pass on your own onChange events to the edit inputs and have it trigger whatever refetches or rerenders you need

[loughlinclaus3]

That's... a fair point. I've managed to get both the "table" and "row" editDisplayMode working by setting a controlled editingRow in the onFocus of the dropdowns, and with the recent update to the MRT_EditCellTextField's line 83, I won't need to include the select: true muEditTextFieldProps in order to force my custom setEditingRow function to fire anymore either.

Thank you for your time!

[tmax22]

heres in example for custom autocomplete edit:

  const columns = useMemo<MRT_ColumnDef<Row>[]>(
      ...
      {
        accessorKey: "access_level",
        header: "Access Level",
        Edit: ({ row, column, cell }) => {
          const [value, setValue] = useState(row.original.access_level);

          return (
            <Autocomplete
              options={Object.values(AccessLevel)}
              value={value}
              onChange={(e, value) => {
                const val = value ?? "Unknown";
                const newRowVal = {
                  ...row.original,
                  access_level: val,
                };
                setEditedRows((prev) => ({
                  ...prev,
                  [row.original.id]: newRowVal,
                }));
                setValue(val);
                row._valuesCache[column.id] = value;

              }}
              renderInput={(params) => <TextField {...params} />}
            />
          );
        },
      }

note for the usage of the undocumented row._valuesCache[column.id] property which i had to figure out myself by reading the source code.

@KevinVandy please consider documenting this propery (_valuesCache)

[KevinVandy]

It has been documented right here though: https://www.material-react-table.com/docs/guides/editing#use-custom-editing-components

[tmax22]

missed that one, thanks