Skip to content

A React component that takes away the pain of managing item selection state in tables and lists

License

Notifications You must be signed in to change notification settings

seanconnollydev/react-item-select

Repository files navigation

NPM

react-item-select

A React component that takes away the pain of managing item selection state in tables and lists

https://react-item-select.now.sh

Install

npm i --save react-item-select

Usage

Basic

import withSelections from 'react-item-select';

const MyBasicList = ({ handleSelect, isItemSelected }) => (
  <div>
    <div>
      <input name="first" type="checkbox" checked={isItemSelected(1)} onChange={handleSelect(1)} />
    </div>
    <div>
      <input name="first" type="checkbox" checked={isItemSelected(2)} onChange={handleSelect(2)} />
    </div>
</div>

export default withSelections(MyBasicList);

Table

import withSelections from 'react-item-select';

const items = [{id: 1, name: 'One'}, {id: 2, name: 'Two'}, {id: 3, name: 'Three'}];

const MyTable = ({ handleSelect, isItemSelected }) => (
  <table>
    <tbody>
      {items.map(item => (
        <tr key={item.id}>
          <td>
            <input name="first" type="checkbox" checked={isItemSelected(item.id)} onChange={handleSelect(item.id)} />
          </td>
          <td>
            {item.name}
          </td>
        </tr>
      ))}
    </tbody>
  </table>
);

export default withSelections(MyTable);

Semantic UI React Table

import withSelections from 'react-item-select';
import { Table } from 'semantic-ui-react';

const items = [{id: 1, name: 'One'}, {id: 2, name: 'Two'}, {id: 3, name: 'Three'}];

const MyTable = ({ handleSelect, isItemSelected }) => (
  <Table>
    <Table.Body>
      {items.map(item => (
        <Table.Row key={item.id}>
          <Table.Cell>
            <Checkbox checked={isItemSelected(item.id)} onChange={handleSelect(item.id)} />
          </Table.Cell>
          <Table.Cell>
            {item.name}
          </Table.Cell>
        </Table.Row>
      ))}
    </Table.Body>
  </Table>
);

export default withSelections(MyTable);

Options

Property Description Type
areAllIndeterminate(items) true if at least one item is selected not all items are selected function
areAllSelected(items) true if all items are selected, otherwise false function
areAnySelected true if at least one item in the list is selected, otherwise false boolean
handleClearAll() Deselects all items function
handleSelect(id) Toggles an item (e.g. when a user clicks a checkbox) function
handleSelectAll(items) Toggles all items function
isItemSelected(item.id) true if the item is selected, otherwise false function
selectedCount The number of items selected number
selections Keyed object where the key is a specified id and the value is true if the item is in the list object

About

A React component that takes away the pain of managing item selection state in tables and lists

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published