@diginet/ra-customizable-datagrid
v1.2.8
Published
<div align="center"> <div style="margin-bottom: 20px">
Downloads
9
Readme
React Admin plugin that allows to hide / show columns dynamically.
Preview
Demo link
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 ra-customizable-datagrid
or
$> yarn add ra-customizable-datagrid
Then replace React Admin Datagrid
by CustomizableDatagrid
import CustomizableDatagrid from 'ra-customizable-datagrid';
const PostList = props => (
<List {...props}>
<CustomizableDatagrid>
<TextField source="id" />
<TextField source="title" />
</CustomizableDatagrid>
</List>
);
Configuration
Storage
By default LocalStorage is used to store user preferences.
If you need to store them somewhere else, use the storage
props like this :
<CustomizableDatagrid storage={CustomStorage}>
where CustomStorage is an object with the set
and get
methods :
const CustomStorage = {
get: (resourceName) => /* your own logic here */,
set: (resourceName, selectedColumns) => /* your own logic here */,
};
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>
);
How to run the demo locally
$> npm run demo-install
$> npm run demo
License
ra-customizable-datagrid
is licensed under the MIT License, sponsored and supported by Fizix.