Row selection

tip

Install the gridjs-selection plugin if you haven't already. Follow the installation manual.

Example

In order to install the Selection plugin, add a new column to the columns list and instantiate the plugin:

Live Editor

const grid = new Grid({ columns: [ { id: 'myCheckbox', name: 'Select', plugin: { // install the RowSelection plugin component: RowSelection, } }, { name: 'Name', formatter: (cell) => `Name: ${cell}` }, 'Email', ], sort: true, search: true, data: Array(5).fill().map(x => [ faker.name.findName(), faker.internet.email(), ]) });

const grid = new Grid({
  columns: [
      {
        id: 'myCheckbox',
        name: 'Select',
        plugin: {
          // install the RowSelection plugin
          component: RowSelection,
        }
      },
      { 
        name: 'Name',
        formatter: (cell) => `Name: ${cell}`
      },
      'Email',
  ],
  sort: true,
  search: true,
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
  ])
});

Result

Loading...

Selected rows

The selection plugin uses a Redux architecture and that means each selection instance has its own unique Store which keeps the list of selected rows.

Live Editor

const grid = new Grid({ columns: [ { id: 'selectRow', name: 'Select', // select all rows by default! data: () => true, plugin: { component: RowSelection } }, { name: 'Name', formatter: (cell) => `Name: ${cell}` }, 'Email', ], sort: true, data: Array(5).fill().map(x => [ faker.name.findName(), faker.internet.email(), ]) }); grid.on('ready', () => { // find the plugin with the give plugin ID const checkboxPlugin = grid.config.plugin.get('selectRow'); // read the selected rows from the plugin's store console.log('selected rows:', checkboxPlugin.props.store.state); })

const grid = new Grid({
  columns: [
      {
        id: 'selectRow',
        name: 'Select',
        // select all rows by default!
        data: () => true, 
        plugin: {
          component: RowSelection
        }
      },
      { 
        name: 'Name',
        formatter: (cell) => `Name: ${cell}`
      },
      'Email',
  ],
  sort: true,
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
  ])
});
 
grid.on('ready', () => {
  // find the plugin with the give plugin ID
  const checkboxPlugin = grid.config.plugin.get('selectRow');
  // read the selected rows from the plugin's store
  console.log('selected rows:', checkboxPlugin.props.store.state);
})

Result

Loading...

tip

Follow the Advanced Plugin article to learn more about writing Grid.js plugins!