ra-customizable-datagrid

KO | EN

gitlite — search

#javascript #python #react #go #golang #android #rust #docker #macos #nodejs #awesome #pytorch #mcp #ios

ra-customizable-datagrid

(★ 73)

React Admin plugin that allows to hide / show columns dynamically

File Explorer

Download Latest Version (.zip)

- - addUploadFeature.js
  - data.js
  - dataProvider.js
  - i18nProvider.js
  - index.html
  - index.js
  - validators.js
- .babelrc
- demo.gif
- package-lock.json
- package.json
- README.md
- webpack.config.js
- yarn.lock
- 0.js
- 0.js.map
- index.html
- main.js
- main.js.map
- CustomizableDatagrid.js
- index.js
- LocalStorage.js
- SelectionDialog.js
.babelrc
.editorconfig
.gitignore
.npmignore
.prettierrc
LICENSE
package-lock.json
package.json
README.md
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![GitHub issues](https://img.shields.io/github/issues/fizix-io/ra-customizable-datagrid.svg)](https://github.com/fizix-io/ra-customizable-datagrid/issues)
[![GitHub stars](https://img.shields.io/github/stars/fizix-io/ra-customizable-datagrid.svg)](https://github.com/fizix-io/ra-customizable-datagrid/stargazers)
[![GitHub license](https://img.shields.io/github/license/fizix-io/ra-customizable-datagrid.svg)](https://github.com/fizix-io/ra-customizable-datagrid/blob/master/LICENSE)
[![Twitter](https://img.shields.io/twitter/url/https/github.com/fizix-io/ra-customizable-datagrid.svg?style=social)](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Ffizix-io%2Fra-customizable-datagrid)

</div>

<h1 align="center">ra-customizable-datagrid for <a rel="noopener" target="_blank" href="https://github.com/marmelab/react-admin/">React Admin</a></h1>

[React Admin](https://github.com/marmelab/react-admin/) plugin that allows to hide / show columns dynamically.

</div>

## 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 => (
  <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 :

```jsx
<CustomizableDatagrid storage={CustomStorage}>
```

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 => (
  <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 <a href="https://fizix.io/" rel="noopener" target="_blank">Fizix</a>.

ra-customizable-datagrid

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

ra-customizable-datagrid

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README