Tables optional

Clean, responsive tables for displaying data with various styling options.

Basic Example

Standard table with clean styling using .focus-table.

Name	Email	Role	Status
John Doe	john.doe@example.com	Developer	Active
Jane Smith	jane.smith@example.com	Designer	Active
Bob Johnson	bob.johnson@example.com	Manager	Inactive

HTML

<table class="focus-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john.doe@example.com</td>
      <td>Developer</td>
      <td>Active</td>
    </tr>
  </tbody>
</table>

Striped Table

Use striped tables for long lists with many rows to help users track across columns. The alternating background improves readability and reduces eye strain:

Product	Price	Quantity	Total
Product A	$25.00	2	$50.00
Product B	$15.00	3	$45.00
Product C	$30.00	1	$30.00
Product D	$20.00	2	$40.00

HTML

<table class="focus-table focus-table-striped">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <!-- rows here -->
  </tbody>
</table>

Bordered Table

Use bordered tables for dense data where clear cell separation is important, like spreadsheets, comparison tables, or data grids. Borders make individual cells easier to distinguish:

ID	Task	Priority	Due Date
1	Update documentation	High	2026-01-15
2	Fix bug in login	Critical	2026-01-10
3	Review pull requests	Medium	2026-01-20

HTML

<table class="focus-table focus-table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Task</th>
      <th>Priority</th>
      <th>Due Date</th>
    </tr>
  </thead>
  <tbody>
    <!-- rows here -->
  </tbody>
</table>

Compact Table

Use compact tables when space is limited or you need to fit more data on screen. Best for admin panels, dashboards, or data-dense interfaces. Avoid on mobile unless necessary:

Server	Status	CPU	Memory
web-01	Online	45%	2.1 GB
web-02	Online	32%	1.8 GB
db-01	Online	68%	4.5 GB
cache-01	Offline	0%	0 GB

HTML

<table class="focus-table focus-table-compact">
  <thead>
    <tr>
      <th>Server</th>
      <th>Status</th>
      <th>CPU</th>
      <th>Memory</th>
    </tr>
  </thead>
  <tbody>
    <!-- rows here -->
  </tbody>
</table>

Responsive Table

Enable horizontal scrolling on small screens with .focus-table-responsive wrapper.

Column 1	Column 2	Column 3	Column 4	Column 5	Column 6	Column 7	Column 8
Data 1	Data 2	Data 3	Data 4	Data 5	Data 6	Data 7	Data 8
Data 1	Data 2	Data 3	Data 4	Data 5	Data 6	Data 7	Data 8

HTML

<div class="focus-table-responsive">
  <table class="focus-table">
    <!-- table content -->
  </table>
</div>

Text Alignment

Align cell content with .text-center and .text-right classes.

Item	Quantity	Price	Total
Widget A	5	$12.99	$64.95
Widget B	3	$8.50	$25.50
Widget C	7	$15.00	$105.00

HTML

<table class="focus-table">
  <thead>
    <tr>
      <th>Item</th>
      <th class="text-center">Quantity</th>
      <th class="text-right">Price</th>
      <th class="text-right">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td class="text-center">5</td>
      <td class="text-right">$12.99</td>
      <td class="text-right">$64.95</td>
    </tr>
  </tbody>
</table>

Interactive Table Builder

Customize a table and see the code update in real-time:

Column 1	Column 2	Column 3
Data 1-1	Data 1-2	Data 1-3
Data 2-1	Data 2-2	Data 2-3
Data 3-1	Data 3-2	Data 3-3

HTML

Builder Options

Columns:

Rows:

Options: Striped Rows Bordered Compact Hoverable Sortable JS Responsive Wrapper

JavaScript API

Add interactive sorting to tables with the FocusUI.Tables.makeSortable() API. Supports automatic number/string detection and toggle between ascending/descending.

Make Table Sortable

Click the column headers below to test sorting:

Name	Age	City
Alice Johnson	28	New York
Bob Smith	34	Los Angeles
Charlie Brown	22	Chicago
Diana Prince	31	Boston

HTML + JavaScript

<table class="focus-table" id="sortableTable">
  <thead>
    <tr>
      <th data-sort="name">Name <i class="fa fa-sort"></i></th>
      <th data-sort="age">Age <i class="fa fa-sort"></i></th>
      <th data-sort="city">City <i class="fa fa-sort"></i></th>
    </tr>
  </thead>
  <tbody>
    <!-- table rows -->
  </tbody>
</table>

<script>
FocusUI.Tables.makeSortable('#sortableTable')
</script>

With Sort Callback

JavaScript

FocusUI.Tables.makeSortable('#myTable', {
  onSort: function(data) {
    console.log('Sorted by:', data.column, 'in', data.direction, 'order')
    console.log('Rows:', data.rows)
  }
})

Cleanup

JavaScript

const sortable = FocusUI.Tables.makeSortable('#myTable')

sortable.destroy()

Methods

Method	Returns	Description
`Tables.makeSortable(selector, options)`	Object	Make a table sortable. Returns object with `destroy()` method.

Options

Option	Type	Default	Description
`headerSelector`	string	`'th[data-sort]'`	Selector for sortable column headers
`bodySelector`	string	`'tbody'`	Selector for table body element
`sortIcon`	string	`'<i class="fa fa-sort">'`	Default (unsorted) icon HTML
`sortIconAsc`	string	`'<i class="fa fa-sort-up">'`	Ascending sort icon HTML
`sortIconDesc`	string	`'<i class="fa fa-sort-down">'`	Descending sort icon HTML
`onSort`	function	`null`	Callback after sorting: `({ column, direction, rows })`

The API automatically detects numbers vs strings and sorts accordingly.

CSS Classes Reference

Class	Description
`.focus-table`	Base table styling with shadow and hover effects
`.focus-table-striped`	Alternating row background colors
`.focus-table-bordered`	Add borders to all table cells
`.focus-table-compact`	Reduced padding for more compact display
`.focus-table-responsive`	Wrapper div enabling horizontal scroll on small screens
`.text-center`	Center-align cell content (on th/td)
`.text-right`	Right-align cell content (on th/td)