[data grid] Actions Navigate

[aress31]

Summary

Since hooks cannot be directly used within valueGetter or getActions, I suggest providing pre-built actions, such as navigation, opening modals, and more. This would enable a much broader range of use cases, such as integrating with React Router actions or parsing URL parameters to control modal visibility.

Currently, hooks need to be passed to the function that creates the columns. In complex applications where column creation occurs several levels above the components using them, this adds unnecessary complexity. Allowing the use of function callbacks or offering pre-built actions would simplify integration and enhance flexibility.

Examples

No response

Motivation

No response

Search keywords: datagrid, action, navigate

[michelengelen]

Hey @aress31 ... the idea behind makes perfect sense.
We do have some methods on the GridApi to show/hide the panels programmatically, though. Wouldn't these be sufficient for what you are trying to do?

GridApi docs

[aress31]

@michelengelen, let me give you this use case:

const DataGridView = () => {
  // --- SNIP ---

  const modal = useModal();
  const [refineCoreProps, setRefineCoreProps] = useState({ action: "create" });

  const openModal = (action, id) => {
    setRefineCoreProps({ action, id });
    modal.show();
  };

  return (
    <Box>
      <DataGridComponent
        columns={
          loadingColumns || loadingData
            ? []
            : createColumns(supabaseColumns, meta, openModal)
        }
        // --- SNIP ---
        slotProps={{ toolbar: { openModal } }}
      />
      <FormDialog
        modalProps={{ modal, refineCoreProps }}
        // --- SNIP ---
      />
    </Box>
  );
};

I have a FormModal alongside the DataGrid with controls for various actions in the toolbar, however, I also have some other controls for the same toolbar as part of the datagridActions, my work around is to pass the openModal hook and then dynamically create the action columns - I am sure there could be much more efficient ways to achieve that by maybe defining hooks/callbacks, that could then be used directly within the actions without having to pass them down the entire tree.

[michelengelen]

OK, makes sense. I'll add this to the board for the team to have a look and estimate.
Thanks for providing a use case as well ... It really helps in determining what there is to be imporoved! 👍🏼