Add SelectColumns and DatagridConfigurable

[fzaninotto]

Enregistrement.de.l.ecran.2022-10-18.a.11.45.14.mov

• Add <DatagridConfigurable> component
• Add <DatagridConfigurable> story
• Add <DatagridConfigurable> tests
• Add <DatagridConfigurable> documentation
• Add <SelectColumnsButton> component
• Add <SelectColumnsButton> story
• Add <SelectColumnsButton> tests
• Add <SelectColumnsButton> documentation
• Use them in the simple example
• Fix memoryStore.removeItems

Closes #7973

[WiXSL]

If you hide all columns, you can't change the config anymore after you have leave the view and come back again 😢

[fzaninotto]

@WiXSL Right. I'm not sure how to solve this, though. Any suggestion?

[WiXSL]

I don't want to be annoying here, but I tried a simple show hidden column functionality with a DatagridConfigurable and it doesn't show the column at all even when the config hasn't been touched yet.
The exact same code works, replacing DatagridConfigurable with Datagrid

// In ra-ui-materialui/src/list/datagrid/DatagridConfigurable.stories.tsx
export const Basic = () => {
     // State to show column
    const [show, setShow] = React.useState(false);

    return (
        <PreferencesEditorContextProvider>
            <MemoryRouter>
                <Inspector />
                <Box display="flex" justifyContent="flex-end">
                    <InspectorButton />
                </Box>
                <Box p={2}>
                    <Button
                        onClick={() => {
                            setShow(true);
                        }}
                    >
                        Show
                    </Button>
                    <DatagridConfigurable
                        resource="books1"
                        data={data}
                        sort={{ field: 'title', order: 'ASC' }}
                        bulkActionButtons={false}
                    >
                        <TextField source="id" />
                        <TextField source="title" label="Original title" />
                        <TextField source="year" />
                        {show === true && <TextField source="author" />}
                    </DatagridConfigurable>
                </Box>
            </MemoryRouter>
        </PreferencesEditorContextProvider>
    );
};

[fzaninotto]

I'm not sure I understand your remark. What's the use case for that?

[WiXSL]

I'm not sure I understand your remark. What's the use case for that?

Let's say a user uses permissions to show or hide a particular set of columns, plus now wants to have a DatagridConfigurable instead of a Datagrid, things may break.

[fzaninotto]

Let's say that we're not supporting this for now ;)

[slax57]

Nice! 💪