Table

Tables display structured data in rows and columns for easy scanning and comparison.

Usage

Use tables to display collections of structured data. Keep tables simple and ensure they're accessible.

Basic Table

Name	Email	Role	Status
John Doe	john@example.com	Admin	Active
Jane Smith	jane@example.com	Editor	Active
Bob Wilson	bob@example.com	Viewer	Inactive

<table class="df-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@example.com</td>
      <td>Admin</td>
      <td><span class="df-badge df-badge--success">Active</span></td>
    </tr>
  </tbody>
</table>

Striped Rows

Product	Category	Price	Stock
Widget Pro	Electronics	$99.00	150
Gadget Plus	Electronics	$149.00	75
Tool Set	Hardware	$45.00	200
Safety Gear	Hardware	$29.00	500

<table class="df-table df-table--striped">...</table>

Hoverable Rows

Date	Description	Amount
Dec 15, 2025	Payment received	+$500.00
Dec 14, 2025	Service fee	-$25.00
Dec 12, 2025	Refund issued	-$150.00

<table class="df-table df-table--hoverable">...</table>

Bordered Table

Feature	Basic	Pro	Enterprise
Users	1	10	Unlimited
Storage	5 GB	100 GB	1 TB
Support	Email	Priority	24/7

<table class="df-table df-table--bordered">...</table>

Compact Table

ID	Name	Value
001	Alpha	100
002	Beta	200
003	Gamma	150
004	Delta	300

<table class="df-table df-table--compact">...</table>

With Selection

	Name	Email	Department
	Alice Johnson	alice@example.com	Engineering
	Bob Smith	bob@example.com	Design
	Carol White	carol@example.com	Marketing

<tr class="df-table__row--selected">
  <td><input type="checkbox" checked></td>
  <td>Bob Smith</td>
  ...
</tr>

With Actions

Project	Status	Progress	Actions
Website Redesign	In Progress
Mobile App	Completed

Sortable Headers

Name	Date	Amount
Alice	Dec 15	$150.00
Bob	Dec 14	$200.00
Carol	Dec 13	$175.00

Responsive Table

Wrap tables in a .df-table-container for horizontal scrolling on small screens:

<div class="df-table-container">
  <table class="df-table">...</table>
</div>

Accessibility

• Use proper <thead>, <tbody>, and <th> elements
• Add scope="col" or scope="row" to headers
• Use aria-sort for sortable columns
• Ensure sufficient color contrast
• Provide accessible names for action buttons

Best Practices

• Keep tables simple and scannable
• Right-align numeric data
• Use consistent formatting
• Consider cards for mobile views
• Provide sorting and filtering for large datasets

API Reference

Classes

Class	Description
df-table	Base table class
df-table--striped	Striped rows
df-table--hoverable	Highlight on hover
df-table--bordered	All borders
df-table--compact	Reduced padding
df-table--sortable	Sortable headers
df-table__row--selected	Selected row
df-table__th--sortable	Sortable header
df-table__th--sorted-asc	Ascending sort
df-table__th--sorted-desc	Descending sort
df-table-container	Responsive wrapper