Tables

DataTables.net

Install and initialize the Boobstrap DataTables 3 adapter with a fully functional search, sorting, page-length, and pagination example.

Tables guideCopy-ready referencev0.7.0 current

Tables

DataTables.net

Add DataTables 3 search, ordering, paging, and result updates to a semantic Boobstrap table without loading a second visual theme. The example below is live and fully functional.

Compatibility: use the dependency-free DataTables 3 package. Do not load datatables.net-dt or its default CSS alongside the Boobstrap adapter.

Fully functional DataTables.net integration

This live DataTables 3 example supports client-side search, column sorting, page-length changes, result counts, and pagination. Try every control: the generated interface is styled entirely by Boobstrap tokens.

Customer directory
Customer	Role	Office	Joined	Status
Avery Morgan	Engineering lead	London	Jul 28, 2026	Active
Kai Patel	Product designer	Toronto	Jul 22, 2026	Active
Sam Rivera	Support manager	Austin	Jul 19, 2026	Invited
Jordan Lee	Data analyst	Singapore	Jul 14, 2026	Active
Noor Hassan	Security engineer	Berlin	Jul 9, 2026	Invited
Taylor Brooks	Account executive	New York	Jun 30, 2026	Active
Emi Tanaka	Frontend engineer	Tokyo	Jun 24, 2026	Active
Robin Clarke	Content strategist	Dublin	Jun 18, 2026	Invited
Priya Shah	Product manager	Mumbai	Jun 11, 2026	Active
Casey Nguyen	QA engineer	Sydney	Jun 3, 2026	Active
Morgan Okafor	Finance director	Lagos	May 27, 2026	Invited
Alexis Martin	Solutions architect	Paris	May 16, 2026	Active
Drew Wilson	Operations lead	Chicago	May 8, 2026	Active

HTML · DataTables customer directory

<div class="bs-datatable">
  <table class="bs-table bs-table-striped bs-table-hover" id="customer-directory" data-datatables-demo>
    <caption>Customer directory</caption>
    <thead><tr><th scope="col">Customer</th><th scope="col">Role</th><th scope="col">Office</th><th scope="col">Joined</th><th scope="col">Status</th></tr></thead>
    <tbody>
      <tr><th scope="row">Avery Morgan</th><td>Engineering lead</td><td>London</td><td data-order="2026-07-28">Jul 28, 2026</td><td><span class="bs-badge bs-badge-primary">Active</span></td></tr>
      <tr><th scope="row">Kai Patel</th><td>Product designer</td><td>Toronto</td><td data-order="2026-07-22">Jul 22, 2026</td><td><span class="bs-badge bs-badge-primary">Active</span></td></tr>
      <tr><th scope="row">Sam Rivera</th><td>Support manager</td><td>Austin</td><td data-order="2026-07-19">Jul 19, 2026</td><td><span class="bs-badge">Invited</span></td></tr>
      <tr><th scope="row">Jordan Lee</th><td>Data analyst</td><td>Singapore</td><td data-order="2026-07-14">Jul 14, 2026</td><td><span class="bs-badge bs-badge-primary">Active</span></td></tr>
      <tr><th scope="row">Noor Hassan</th><td>Security engineer</td><td>Berlin</td><td data-order="2026-07-09">Jul 9, 2026</td><td><span class="bs-badge">Invited</span></td></tr>
      <tr><th scope="row">Taylor Brooks</th><td>Account executive</td><td>New York</td><td data-order="2026-06-30">Jun 30, 2026</td><td><span class="bs-badge bs-badge-primary">Active</span></td></tr>
      <tr><th scope="row">Emi Tanaka</th><td>Frontend engineer</td><td>Tokyo</td><td data-order="2026-06-24">Jun 24, 2026</td><td><span class="bs-badge bs-badge-primary">Active</span></td></tr>
      <tr><th scope="row">Robin Clarke</th><td>Content strategist</td><td>Dublin</td><td data-order="2026-06-18">Jun 18, 2026</td><td><span class="bs-badge">Invited</span></td></tr>
      <tr><th scope="row">Priya Shah</th><td>Product manager</td><td>Mumbai</td><td data-order="2026-06-11">Jun 11, 2026</td><td><span class="bs-badge bs-badge-primary">Active</span></td></tr>
      <tr><th scope="row">Casey Nguyen</th><td>QA engineer</td><td>Sydney</td><td data-order="2026-06-03">Jun 3, 2026</td><td><span class="bs-badge bs-badge-primary">Active</span></td></tr>
      <tr><th scope="row">Morgan Okafor</th><td>Finance director</td><td>Lagos</td><td data-order="2026-05-27">May 27, 2026</td><td><span class="bs-badge">Invited</span></td></tr>
      <tr><th scope="row">Alexis Martin</th><td>Solutions architect</td><td>Paris</td><td data-order="2026-05-16">May 16, 2026</td><td><span class="bs-badge bs-badge-primary">Active</span></td></tr>
      <tr><th scope="row">Drew Wilson</th><td>Operations lead</td><td>Chicago</td><td data-order="2026-05-08">May 8, 2026</td><td><span class="bs-badge bs-badge-primary">Active</span></td></tr>
    </tbody>
  </table>
</div>

Install DataTables 3

Install the dependency-free DataTables core. Do not import its default styling package—the Boobstrap adapter supplies the complete presentation layer.

Terminal · Install DataTables

npm install @boobstrap/boobstrap datatables.net

Initialize the live table

DataTables owns search, ordering, paging, and result updates. After initialization, name the generated overflow cell so keyboard users can reach columns beyond the viewport.

JavaScript · DataTables initialization

import "@boobstrap/boobstrap/dist/boobstrap.css";
import DataTable from "datatables.net";

const table = document.querySelector("#customer-directory");

new DataTable(table, {
  pageLength: 5,
  lengthMenu: [5, 10, 25],
  order: [[3, "desc"]],
  layout: {
    topStart: { pageLength: { menu: [5, 10, 25] } },
    topEnd: { search: { placeholder: "Name, role, or office" } },
    bottomStart: "info",
    bottomEnd: { paging: { buttons: 3 } },
  },
  language: {
    entries: { _: "customers", 1: "customer" },
    search: "Search customers:",
    zeroRecords: "No customers match that search.",
  },
});

const region = table.closest(".dt-layout-table")
  ?.querySelector(":scope > .dt-layout-cell");

region?.setAttribute("role", "region");
region?.setAttribute("tabindex", "0");
region?.setAttribute("aria-label", "Customer directory results");

Version

The adapter targets dependency-free DataTables 3. Import datatables.net and do not load the package’s default visual theme.

Class map

Wrap the source table in .bs-datatable and keep .bs-table plus any table modifiers on the table itself.

Accessibility

DataTables maintains control state and result information. Give its generated overflow cell a region role, keyboard target, and accessible name after initialization.

DataTables adapter API

Boobstrap owns presentation; DataTables owns generated controls, data state, and ARIA updates. Keep the source table semantic before initialization.

DataTables adapter classes and their purposes
Class	Purpose	Use it on
`.bs-datatable`	Scopes token-driven presentation for generated search, page-length, information, sorting, overflow, processing, and pagination controls.	A wrapper around the source table before initialization.
`.bs-table`	Preserves the framework table treatment after DataTables enhances the markup.	The source table.
`.bs-table-striped`	Optionally adds alternating row surfaces.	The source table.
`.bs-table-hover`	Optionally adds pointer and keyboard-focus row feedback.	The source table.