Skip to main content

Overview

The .data-table component turns standard tables into interactive data grids equipped with column sorting, batch row selection, sticky headers, expandable details, and responsive toolbar controls.

Interactive Data Table Example

Click any column header to sort in ascending or descending order. Click the header checkbox to select all rows. Click row toggle arrows to reveal nested drawer details.

3 Users
User Role Status Spend Actions
▶
JD
Jane Doe
jane@example.com
Lead Architect Active $4,250.00
Jane Doe's Activity History

Last login: 10 minutes ago from San Francisco, CA. Has access to 8 repository projects.
▶
AS
Alex Smith
alex@example.com
Product Designer Pending $1,120.00
Alex Smith's Activity History

Invitation pending verification. Member since Sept 2026.
▶
MR
Marcus Roy
marcus@example.com
Full Stack Dev Active $2,890.00
Marcus Roy's Activity History

Active in Frontend Engineering and Design Systems teams.
Showing 1 to 3 of 3 entries 
<div class="data-table-wrapper" data-boodoo="datatable">
  <table class="table data-table">
    <thead>
      <tr>
        <th class="data-table-select-col">
          <input type="checkbox" class="form-check-input" id="tblCheckAll" name="selectAll">
        </th>
        <th class="sortable"><span>Name</span></th>
        <th class="sortable"><span>Amount</span></th>
      </tr>
    </thead>
    <tbody>
      <tr class="data-table-expandable-row">
        <td class="data-table-select-col">
          <input type="checkbox" class="form-check-input" id="row1" name="row1">
        </td>
        <td><span class="data-table-toggle-icon">▶</span> <span>Jane Doe</span></td>
        <td><span>$4,250.00</span></td>
      </tr>
      <tr class="data-table-row-detail">
        <td colspan="3"><span>Additional drawer details here</span></td>
      </tr>
    </tbody>
  </table>
</div>

Compact & Dense Grids

Add .data-table-compact or .data-table-dense to maximize information density for administrative dashboards.