table-row-selection

`table-row-selection` is a JavaScript library for easily implementing row selection in HTML tables. This library allows you to add row selection features using a custom CSS class and detect selection changes with an event handler.

Installation

Install this package via npm

npm install table-row-selection

Usage

To use this library, simply call the `table-row-selection` constructor with the table element as the argument:

import TableRowSelection from 'table-row-selection'

const table = new TableRowSelection(document.getElementById('example'))

Configuration

You can add additional configuration such as `activeClass`` to add a CSS class to the selected rows:

const config = {
  activeClass: 'table-active', // CSS class for selected rows
}

const table = new TableRowSelection(table, config)

Methods

This library provides several methods to facilitate row selection manipulation or event handling:

`onChange()`

Detect row selection changes.

const table = new TableRowSelection(document.getElementById('example'))
table.onChange = () => {
  console.log('selected changes')
}
`getSelected()`

Returns an array of selected checkbox values within each row.

const table = new TableRowSelection(document.getElementById('example'))
table.onChange = () => {
  console.log(table.getSelected())
}
`selectAll()`

Selects all rows in the table.

table.selectAll()
`unselectAll()`

Unselects all rows in the table.

table.unselectAll()
`select(value: string | string[])`

Select rows with specific values.

table.select('1')
table.select(['1', '3'])
`unselect(value: string | string[])`

Unselect rows with specific values.

table.unselect('1')
table.unselect(['1', '3'])

Example Usage

Here is a complete example of using this library:

Name Position Office
Airi Satou Accountant Tokyo
Angelica Ramos CEO London
Ashton Cox Junior Technical Author San Francisco
Selected: 0
Selected values: []
 
<style>
  #example {
    width: 100%;
    border-collapse: collapse;
  }
  #example th:first-child {
    width: 0;
  }
  #example td,
  #example th {
    border: 1px solid #ddd;
    padding: 0.25rem 0.5rem;
    vertical-align: middle;
  }
  #example tr.table-active {
    background-color: #eee;
  }
</style>

<table id="example">
  <thead>
    <tr>
      <th><input type="checkbox" /></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" value="1" /></td>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
    </tr>
    <tr>
      <td><input type="checkbox" value="2" /></td>
      <td>Angelica Ramos</td>
      <td>CEO</td>
      <td>London</td>
    </tr>
    <tr>
      <td><input type="checkbox" value="3" /></td>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">
        <div>Selected: <code id="selected">0</code></div>
        <div>Selected values: <code id="selected-values">[]</code></div>
        <button id="selectAll"><code>selectAll</code></button>
        <button id="unselectAll"><code>unselectAll</code></button>
        <button id="select"><code>select(['1', '3'])</code></button>
        <button id="unselect"><code>unselect(['1'])</code></button>
      </td>
    </tr>
  </tfoot>
</table>

<script>
  const table = new TableRowSelection(document.getElementById('example'))
  table.onChange = () => {
    const selected = table.getSelected()
    document.getElementById('selected').textContent = selected.length
    document.getElementById('selected-values').textContent = JSON.stringify(selected)
  }
  document.getElementById('selectAll').addEventListener('click', () => {
    table.selectAll()
  })
  document.getElementById('unselectAll').addEventListener('click', () => {
    table.unselectAll()
  })
  document.getElementById('select').addEventListener('click', () => {
    table.select(['1', '3'])
  })
  document.getElementById('unselect').addEventListener('click', () => {
    table.unselect(['1'])
  })
</script>
Name Position Office
Airi Satou Accountant Tokyo
Angelica Ramos CEO London
Ashton Cox Junior Technical Author San Francisco 
<style>
  #example2 th:first-child {
    width: 0;
  }
</style>

<table id="example2" class="table table-bordered">
  <thead>
    <tr>
      <th><div><input class="form-check-input" type="checkbox" /></div></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div><input value="1" class="form-check-input" type="checkbox" /></div></td>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
    </tr>
    <tr>
      <td><div><input value="2" class="form-check-input" type="checkbox" /></div></td>
      <td>Angelica Ramos</td>
      <td>CEO</td>
      <td>London</td>
    </tr>
    <tr>
      <td><div><input value="3" class="form-check-input" type="checkbox" /></div></td>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
    </tr>
  </tbody>
</table>

<script>
  new TableRowSelection(document.getElementById('example2'), {
    activeClass: 'table-primary',
  })
</script>