useBulkActions

The useBulkActions plugin lets the user select any number of rows in the column and perform a set of actions against those rows.

When intializing the useBulkActions plugin, you must provide a configuration object with an onSelectionChange callback, an onActionClick callback, and an array of actions.

Result

Loading...

Live Editor

const columns = [ { key: 'name', label: 'Name', }, { key: 'income', label: 'Income', }, { key: 'type', label: 'Type', }, ]; const initialData = [ { id: 1, name: 'Moe', income: 1000, type: 'personal', }, { id: 2, name: 'Larry', income: null, type: 'business', }, { id: 3, name: 'Curly', income: 1, type: 'other', }, ]; const Example = () => { const [data, setData] = React.useState(initialData); const bulkActionPlugin = useBulkActions({ onSelectionChange: (updatedRows) => { setData( data.map((row) => { const matchedRow = updatedRows.find((matchRow) => matchRow.id === row.id); if (matchedRow) { row = matchedRow; } return row; }), ); }, onActionClick: (action) => { let newData; switch (action) { case 'Delete': newData = data.filter((row) => { if (!row.selected) { return row; } }); break; case 'Howdy': newData = data.map((row) => { if (row.selected) { row.name = '🤠'; } return row; }); break; default: newData = data; break; } setData(newData); }, actions: ['Delete', 'Howdy'], }); return ( <DataTable id="demo-component" columns={columns} data={data} plugins={[bulkActionPlugin]} title="Clients" responsive stacked /> ); }; render(<Example />);

const columns = [
  {
    key: 'name',
    label: 'Name',
  },
  {
    key: 'income',
    label: 'Income',
  },
  {
    key: 'type',
    label: 'Type',
  },
];

const initialData = [
  {
    id: 1,
    name: 'Moe',
    income: 1000,
    type: 'personal',
  },
  {
    id: 2,
    name: 'Larry',
    income: null,
    type: 'business',
  },
  {
    id: 3,
    name: 'Curly',
    income: 1,
    type: 'other',
  },
];

const Example = () => {
  const [data, setData] = React.useState(initialData);

  const bulkActionPlugin = useBulkActions({
    onSelectionChange: (updatedRows) => {
      setData(
        data.map((row) => {
          const matchedRow = updatedRows.find((matchRow) => matchRow.id === row.id);
          if (matchedRow) {
            row = matchedRow;
          }

          return row;
        }),
      );
    },
    onActionClick: (action) => {
      let newData;

      switch (action) {
        case 'Delete':
          newData = data.filter((row) => {
            if (!row.selected) {
              return row;
            }
          });
          break;
        case 'Howdy':
          newData = data.map((row) => {
            if (row.selected) {
              row.name = '🤠';
            }

            return row;
          });
          break;
        default:
          newData = data;
          break;
      }

      setData(newData);
    },
    actions: ['Delete', 'Howdy'],
  });

  return (
    <DataTable
      id="demo-component"
      columns={columns}
      data={data}
      plugins={[bulkActionPlugin]}
      title="Clients"
      responsive
      stacked
    />
  );
};

render(<Example />);

Plugin

PluginProperties

Type: Object

Properties

• onSelectionChange Callback receives an array of the rows that have been selected. These rows are in the same format as the ones initially passed into the DataTable but with the addition of a selected property on the row object. It's up to you to update your local copy of the data with the updated rows from the callback and pass it back down into the DataTable. The code snippet below shows one method of doing so.
• onActionClick Callback to handle a particular action is chosen. For each action you specify, you will need to determine what to do to any row that has selected: true set on it.
• actions Array<string> Array containing the names of the actions you want to be displayed in the Actions dropdown in the toolbar. The actions you provide will be returned in the onActionClick callback above.

useBulkActions

Create a plugin hook that enables DataTable bulk actions and UI changes.

Parameters

• props PluginProperties (optional, default {})

Returns Plugin

onSelectionChange

Type: Function

Parameters

• updatedRows Array<Object> An array of the updated row objects, each row object as a selected property set to true/false.

onActionClick

Type: Function

Parameters

• action string The string of the action that was clicked.