react-admin-customizable-datagrid

ra-customizable-datagrid for React Admin

React Admin plugin that allows to hide / show columns dynamically.

Based on fizix-io/ra-customizable-datagrid

Project was moved to TypeScript and dependencies was updated.

Features

• Users can show/hide columns, obviously
• Users preferences are stored by resource
• The storage mechanism can be replaced
• Developers can choose the default visible columns

Installation

ra-customizable-datagrid is available from npm. You can install it (and its required dependencies) using:

$> npm install --save react-admin-customizable-datagrid

or

$> yarn add react-admin-customizable-datagrid

Then replace React Admin Datagrid by CustomizableDatagrid

import CustomizableDatagrid from 'ra-customizable-datagrid';

const PostList = () => (
  <List>
    <CustomizableDatagrid>
      <TextField source="id" />
      <TextField source="title" />
    </CustomizableDatagrid>
  </List>
);

Configuration

Default columns

All the columns are visible by default.

This behavior can be changed with the defaultColumns prop. Just pass an array containing the name of the columns you want to be visible.

import CustomizableDatagrid from 'ra-customizable-datagrid';

const PostList = props => (
  <List {...props}>
    <CustomizableDatagrid defaultColumns={['title']}>
      <TextField source="id" />
      <TextField source="title" />
    </CustomizableDatagrid>
  </List>
);

License

ra-customizable-datagrid is licensed under the MIT License, sponsored and supported by Fizix.