How to Create React table select with bulk actions?

To create a React table with the ability to select multiple rows and perform bulk actions, you can use a combination of React state and event handlers. Here's an example implementation:

1. Define a state variable to hold the selected rows:

const [selectedRows, setSelectedRows] = useState([]);
Define a function to handle row selection. This function will add or remove a row from the selectedRows array depending on its current state:
javascript
Copy code
function handleRowSelect(event, id) {
  if (event.target.checked) {
    setSelectedRows([...selectedRows, id]);
  } else {
    setSelectedRows(selectedRows.filter(rowId => rowId !== id));
  }
}

In this example, we are using the spread operator to add the new row to the selectedRows array when the checkbox is checked, and the filter method to remove the row from the array when the checkbox is unchecked.

2. Define a function to handle bulk actions. This function will perform the selected action on all the selected rows:

function handleBulkAction(action) {
  switch (action) {
    case 'delete':
      // Delete the selected rows from the table
      setSelectedRows([]);
      break;
    case 'export':
      // Export the selected rows to a CSV file
      break;
    // Add more cases for other actions
  }
}

In this example, we are using a switch statement to perform different actions based on the selected action. For the 'delete' action, we simply clear the selectedRows array. For the 'export' action, we would typically export the selected rows to a CSV file.

3. Create the table with checkboxes for row selection:

<table>
  <thead>
    <tr>
      <th>Select</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    {rows.map(row => (
      <tr key={row.id}>
        <td>
          <input type="checkbox" onChange={event => handleRowSelect(event, row.id)} checked={selectedRows.includes(row.id)} />
        </td>
        <td>{row.name}</td>
        <td>{row.email}</td>
      </tr>
    ))}
  </tbody>
</table>

In this example, we are using the map method to render a row for each item in the rows array. We are also rendering a checkbox for row selection, with the checked prop set to true if the row is currently selected.

4. Add a dropdown menu or button to trigger the bulk action:

<div>
  <select value="" onChange={event => handleBulkAction(event.target.value)}>
    <option value="" disabled>Bulk Actions</option>
    <option value="delete">Delete</option>
    <option value="export">Export</option>
    // Add more options for other actions
  </select>
</div>

In this example, we are using a select element with options for each bulk action. The onChange event will trigger the handleBulkAction function with the selected action.

That's it! With these steps, you can create a React table with the ability to select multiple rows and perform bulk actions.