Data Table

Interactive tables with sorting, searching, and pagination.

Basic Data Table

Wrap a .sui-table in .sui-datatable and add a footer with info and pagination.

# Name Email Role Status
1Alice Martinalice@example.comAdminActive
2Bob Chenbob@example.comEditorActive
3Carol Daviscarol@example.comViewerPending
4David Kimdavid@example.comEditorActive
5Eva Novakeva@example.comAdminInactive
6Frank Lifrank@example.comViewerActive
7Grace Parkgrace@example.comEditorPending
8Henry Wellshenry@example.comViewerActive
 
<div class="sui-datatable">
  <table class="sui-table">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Alice Martin</td>
        <td>alice@example.com</td>
        <td>Admin</td>
        <td><span class="sui-badge sui-badge-success">Active</span></td>
      </tr>
      <!-- more rows... -->
    </tbody>
  </table>
  <div class="sui-datatable-footer">
    <div class="sui-datatable-info"></div>
    <div class="sui-datatable-pagination"></div>
  </div>
</div>

Sortable Columns

Add data-sort="string" or data-sort="number" to <th> elements. Click a header to sort ascending, click again for descending.

# Product Category Price Stock
1Wireless HeadphonesAudio$79142
2Mechanical KeyboardPeripherals$12987
3USB-C HubAccessories$45310
4Webcam HDPeripherals$6553
5Monitor StandAccessories$35205
6Bluetooth SpeakerAudio$55178
7Laptop SleeveAccessories$25420
8Gaming MousePeripherals$5996
 
<div class="sui-datatable">
  <table class="sui-table">
    <thead>
      <tr>
        <th data-sort="number">#</th>
        <th data-sort="string">Product</th>
        <th data-sort="string">Category</th>
        <th data-sort="number">Price</th>
        <th data-sort="number">Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Wireless Headphones</td>
        <td>Audio</td>
        <td>$79</td>
        <td>142</td>
      </tr>
      <!-- more rows... -->
    </tbody>
  </table>
  <div class="sui-datatable-footer">
    <div class="sui-datatable-info"></div>
    <div class="sui-datatable-pagination"></div>
  </div>
</div>

Searchable

Add a .sui-datatable-toolbar with a search input to filter rows in real time.

# Name Department Location Status
1Sarah JohnsonEngineeringNew YorkActive
2Michael BrownDesignLondonActive
3Emily WilsonMarketingTokyoOn Leave
4James TaylorEngineeringBerlinActive
5Lisa AndersonSalesNew YorkActive
6Robert GarciaEngineeringLondonInactive
7Maria LopezDesignTokyoActive
8Thomas WhiteMarketingBerlinOn Leave
9Jennifer LeeSalesNew YorkActive
10Daniel ClarkEngineeringLondonActive
 
<div class="sui-datatable">
  <div class="sui-datatable-toolbar">
    <div class="sui-datatable-search">
      <svg class="sui-datatable-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="11" cy="11" r="8"/>
        <line x1="21" y1="21" x2="16.65" y2="16.65"/>
      </svg>
      <input type="text" placeholder="Search employees...">
    </div>
  </div>
  <table class="sui-table">
    <thead>
      <tr>
        <th data-sort="number">#</th>
        <th data-sort="string">Name</th>
        <th data-sort="string">Department</th>
        <th data-sort="string">Location</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Sarah Johnson</td>
        <td>Engineering</td>
        <td>New York</td>
        <td><span class="sui-badge sui-badge-success">Active</span></td>
      </tr>
      <!-- more rows... -->
    </tbody>
  </table>
  <div class="sui-datatable-footer">
    <div class="sui-datatable-info"></div>
    <div class="sui-datatable-pagination"></div>
  </div>
</div>

Full Featured

Combine search, sortable columns, per-page selector, and pagination for a complete data table experience.

Show entries
Order Customer Product Amount Date Status
#1001Alice MartinPro Subscription$2992026-03-01Completed
#1002Bob ChenTeam License$5992026-03-02Completed
#1003Carol DavisStarter Plan$492026-03-02Pending
#1004David KimEnterprise$1,2992026-03-03Completed
#1005Eva NovakPro Subscription$2992026-03-04Refunded
#1006Frank LiTeam License$5992026-03-04Completed
#1007Grace ParkStarter Plan$492026-03-05Completed
#1008Henry WellsPro Subscription$2992026-03-05Pending
#1009Ivy TorresEnterprise$1,2992026-03-06Completed
#1010Jack MurphyTeam License$5992026-03-06Completed
#1011Karen ScottStarter Plan$492026-03-07Pending
#1012Leo AdamsPro Subscription$2992026-03-07Completed
#1013Mia RiveraEnterprise$1,2992026-03-08Refunded
#1014Noah CooperTeam License$5992026-03-08Completed
#1015Olivia ReedStarter Plan$492026-03-09Completed
 
<div class="sui-datatable">
  <div class="sui-datatable-toolbar">
    <div class="sui-datatable-search">
      <svg class="sui-datatable-search-icon" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2">
        <circle cx="11" cy="11" r="8"/>
        <line x1="21" y1="21" x2="16.65" y2="16.65"/>
      </svg>
      <input type="text" placeholder="Search orders...">
    </div>
    <div class="sui-datatable-perpage">
      <span>Show</span>
      <select>
        <option value="5" selected>5</option>
        <option value="10">10</option>
        <option value="25">25</option>
      </select>
      <span>entries</span>
    </div>
  </div>
  <table class="sui-table">
    <thead>
      <tr>
        <th data-sort="number">Order</th>
        <th data-sort="string">Customer</th>
        <th data-sort="string">Product</th>
        <th data-sort="number">Amount</th>
        <th data-sort="string">Date</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>#1001</td>
        <td>Alice Martin</td>
        <td>Pro Subscription</td>
        <td>$299</td>
        <td>2026-03-01</td>
        <td><span class="sui-badge sui-badge-success">Completed</span></td>
      </tr>
      <!-- more rows... -->
    </tbody>
  </table>
  <div class="sui-datatable-footer">
    <div class="sui-datatable-info"></div>
    <div class="sui-datatable-pagination"></div>
  </div>
</div>

Striped & Compact

Combine with existing table variants like .sui-table-striped and .sui-table-compact.

Show entries
# Task Assignee Priority Progress
1Design landing pageAliceHighBlocked
2Write API docsBobMediumIn Progress
3Fix login bugCarolHighDone
4Update database schemaDavidLowIn Progress
5Add unit testsEvaMediumDone
6Review pull requestsFrankHighIn Progress
7Deploy to stagingGraceMediumDone
8Performance auditHenryLowBlocked
9Migrate to TypeScriptIvyHighIn Progress
10Set up CI/CD pipelineJackMediumDone
11Create onboarding flowKarenLowIn Progress
12Optimize imagesLeoLowDone
 
<div class="sui-datatable">
  <div class="sui-datatable-toolbar">
    <div class="sui-datatable-search">
      <svg class="sui-datatable-search-icon" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2">
        <circle cx="11" cy="11" r="8"/>
        <line x1="21" y1="21" x2="16.65" y2="16.65"/>
      </svg>
      <input type="text" placeholder="Search...">
    </div>
    <div class="sui-datatable-perpage">
      <span>Show</span>
      <select>
        <option value="5" selected>5</option>
        <option value="10">10</option>
      </select>
      <span>entries</span>
    </div>
  </div>
  <table class="sui-table sui-table-striped sui-table-compact">
    <thead>
      <tr>
        <th data-sort="number">#</th>
        <th data-sort="string">Task</th>
        <th data-sort="string">Assignee</th>
        <th data-sort="string">Priority</th>
        <th>Progress</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Design landing page</td>
        <td>Alice</td>
        <td>High</td>
        <td><span class="sui-badge sui-badge-danger">Blocked</span></td>
      </tr>
      <!-- more rows... -->
    </tbody>
  </table>
  <div class="sui-datatable-footer">
    <div class="sui-datatable-info"></div>
    <div class="sui-datatable-pagination"></div>
  </div>
</div>

Delete this item?

This action cannot be undone. This will permanently delete the item and remove all associated data.