https://github.com/reactabular/react-visibility-toggles
Visibility toggles for React (MIT)
https://github.com/reactabular/react-visibility-toggles
Last synced: 9 months ago
JSON representation
Visibility toggles for React (MIT)
- Host: GitHub
- URL: https://github.com/reactabular/react-visibility-toggles
- Owner: reactabular
- License: mit
- Created: 2016-11-27T14:59:59.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-02T14:48:27.000Z (over 8 years ago)
- Last Synced: 2025-04-03T05:13:17.728Z (10 months ago)
- Language: JavaScript
- Homepage: https://reactabular.github.io/react-visibility-toggles/
- Size: 415 KB
- Stars: 2
- Watchers: 1
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](http://travis-ci.org/reactabular/react-visibility-toggles) [](https://www.bithound.io/github/reactabular/react-visibility-toggles) [](https://codecov.io/gh/reactabular/react-visibility-toggles)
# react-visibility-toggles - Visibility toggles for React
`react-visibility-toggles` provides a React component for rendering visibility toggles for table columns. It works well with Reactabular.
## Example
```
/*
import VisibilityToggles from 'react-visibility-toggles';
*/
const columns = [
{
header: {
label: 'Name'
},
visible: true
},
{
header: {
label: 'Age'
},
visible: false
}
];
console.log(column, columnIndex)}
isVisible={({ column }) => column.visible}
props={{}}
/>
```
## Integrating with Reactabular
The following example shows how to integrate `react-visibility-toggles` with Reactabular:
```jsx
/*
import React from 'react';
import * as Table from 'reactabular-table';
import { cloneDeep } from 'lodash';
import VisibilityToggles from 'react-visibility-toggles';
*/
class ToggleColumnsTable extends React.Component {
constructor(props) {
super(props);
this.state = {
columns: [
{
property: 'name',
header: {
label: 'Name'
},
visible: true
},
{
property: 'age',
header: {
label: 'Age'
},
visible: false
},
{
property: 'color',
header: {
label: 'Color'
},
cell: {
transforms: [color => ({ style: { color } })]
},
visible: true
}
],
rows: [
{
id: 100,
name: 'Adam',
age: 12,
color: 'red'
},
{
id: 101,
name: 'Brian',
age: 44,
color: 'green'
},
{
id: 102,
name: 'Mike',
age: 25,
color: 'blue'
}
]
};
this.onToggleColumn = this.onToggleColumn.bind(this);
}
render() {
const { columns, rows } = this.state;
return (
column.visible)}
>
);
}
onToggleColumn({ columnIndex }) {
const columns = cloneDeep(this.state.columns);
columns[columnIndex].visible = !columns[columnIndex].visible;
this.setState({ columns });
}
}
```
## License
MIT. See LICENSE for details.