https://github.com/fizix-io/ra-customizable-datagrid
React Admin plugin that allows to hide / show columns dynamically
https://github.com/fizix-io/ra-customizable-datagrid
react react-admin
Last synced: 11 months ago
JSON representation
React Admin plugin that allows to hide / show columns dynamically
- Host: GitHub
- URL: https://github.com/fizix-io/ra-customizable-datagrid
- Owner: fizix-io
- License: mit
- Created: 2018-07-13T14:33:33.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T07:33:12.000Z (over 3 years ago)
- Last Synced: 2025-07-08T17:48:50.459Z (12 months ago)
- Topics: react, react-admin
- Language: JavaScript
- Homepage: https://fizix-io.github.io/ra-customizable-datagrid/
- Size: 7.06 MB
- Stars: 73
- Watchers: 5
- Forks: 24
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/fizix-io/ra-customizable-datagrid/issues)
[](https://github.com/fizix-io/ra-customizable-datagrid/stargazers)
[](https://github.com/fizix-io/ra-customizable-datagrid/blob/master/LICENSE)
[](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Ffizix-io%2Fra-customizable-datagrid)
ra-customizable-datagrid for React Admin
[React Admin](https://github.com/marmelab/react-admin/) plugin that allows to hide / show columns dynamically.
## Preview
## 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`
```jsx
import CustomizableDatagrid from 'ra-customizable-datagrid';
const PostList = props => (
);
```
## 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 :
```jsx
```
where CustomStorage is an object with the `set` and `get` methods :
```js
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.
```jsx
import CustomizableDatagrid from 'ra-customizable-datagrid';
const PostList = props => (
);
```
## 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.