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
}
];
<VisibilityToggles
columns={columns}
onToggleColumn={({ column, columnIndex }) => console.log(column, columnIndex)}
isVisible={({ column }) => column.visible}
props={{}}
/>
Integrating with Reactabular
The following example shows how to integrate react-visibility-toggles
with Reactabular:
/*import React from 'react';import * as Table from 'reactabular-table';import { cloneDeep } from 'lodash';import VisibilityToggles from 'react-visibility-toggles';*/ Component { ; thisstate = columns: property: 'name' header: label: 'Name' visible: true property: 'age' header: label: 'Age' visible: false property: 'color' header: label: 'Color' cell: transforms: 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' ; thisonToggleColumn = thisonToggleColumn; } { const columns rows = thisstate; return <div> <VisibilityToggles = = /> <Table.Provider = > <Table.Header /> <Table.Body = ="id" /> </Table.Provider> </div> ; } { const columns = ; columnscolumnIndexvisible = !columnscolumnIndexvisible; this; } <ToggleColumnsTable />
License
MIT. See LICENSE for details.