Modifiable Table Web Component Demo

Basic Example

A simple table with removable columns. By default, all removable columns are shown.

Basic Usage

<table-modifiable removable="Name,Email,Phone">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td>555-1234</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>jane@example.com</td>
        <td>555-5678</td>
      </tr>
    </tbody>
  </table>
</table-modifiable>

Name	Email	Phone
John Doe	john@example.com	555-1234
Jane Smith	jane@example.com	555-5678
Bob Johnson	bob@example.com	555-9012

Initial Column Visibility

Use the start-with attribute to specify which columns should be visible initially.

Hiding Columns by Default

<table-modifiable
  removable="Product,Price,Stock,Category,Supplier"
  start-with="Product,Price">
  <table>
    <!-- table content -->
  </table>
</table-modifiable>

Product	Price	Stock	Category	Supplier
Widget	$9.99	42	Tools	Acme Corp
Gadget	$19.99	15	Electronics	Tech Supply
Doohickey	$4.99	128	Parts	Parts Plus

Custom Labels

Customize the button and popover labels using the button-label, button-aria-label, and tools-label attributes.

Customized Interface

<table-modifiable
  removable="Name,Email,Phone,Address"
  start-with="Name,Email"
  button-label="⚙️ Customize View"
  button-aria-label="Customize which columns are visible"
  tools-label="Choose Columns to Display">
  <table>
    <!-- table content -->
  </table>
</table-modifiable>

Name	Email	Phone	Address
Alice Anderson	alice@example.com	555-0101	123 Oak St
Bob Brown	bob@example.com	555-0202	456 Pine Ave
Carol Clark	carol@example.com	555-0303	789 Elm Rd

Event Handling

Listen to the table-modifiable:change event to be notified when columns are toggled.

Event Listener Demo

<table-modifiable
  id="event-demo"
  removable="First Name,Last Name,Department">
  <!-- table -->
</table-modifiable>

<script>
document.querySelector('#event-demo')
  .addEventListener('table-modifiable:change', (e) => {
    console.log(e.detail);
  });
</script>

First Name	Last Name	Department
Alice	Anderson	Engineering
Bob	Brown	Sales
Carol	Clark	Marketing

Event Log

Toggle columns above to see events:

API Reference

For complete documentation of attributes, events, and browser support, see the README.