Table

Responsive data table with optional striping, borders, hover rows, sticky header, and sortable columns.

import { ... } from '@corndev/ui'

Name	Role	Status
Alice	Engineer	Active
Bob	Designer	Active
Carol	Product	On leave
Dave	Marketing	Active

HTML

No JavaScript required — these classes are the whole component.

<div class="corn-table-wrapper">
  <table class="corn-table" data-striped data-hoverable>
    <thead><tr><th>Name</th></tr></thead>
    <tbody><tr><td>Ada</td></tr></tbody>
  </table>
</div>

Classes

Class	Description
`.corn-table`	Base table styles
`.corn-table-wrapper`	Scroll container — always wrap the table in this
`.corn-table-th`

Attributes

On	Attribute	Values
`.corn-table`	`data-hoverable`	`present or absent`
`.corn-table`	`data-striped`	`present or absent`
`.corn-table`	`data-bordered`	`present or absent`
`.corn-table`	`data-sticky-header`	`present or absent`
`.corn-table-th`	`data-sortable`	`present or absent`
`.corn-table-th`	`data-sort`	`asc\|desc`

Vanilla JS

Optional. createTable only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createTable } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createTable(el, { /* options */ });

Options

Option	Type	Default	Description
`striped`	`boolean`	`false`	Alternate the background of even rows.
`bordered`	`boolean`	`false`	Border every cell rather than only the rows.
`hoverable`	`boolean`	`false`	Highlight the row under the pointer.
`stickyHeader`	`boolean`	`false`	Pin `<thead>` during vertical scroll. Needs an ancestor that actually scrolls — `.corn-table-wrapper` only scrolls horizontally, so give it a `max-height` for this to have any effect.

React

Table, TableSortHeader — from @corndev/ui-react.

Props

Prop	Type	Default	Description
`striped`	`boolean`	`false`	Alternate the background of even rows.
`bordered`	`boolean`	`false`	Border every cell rather than only the rows.
`hoverable`	`boolean`	`false`	Highlight the row under the pointer.
`stickyHeader`	`boolean`	`false`	Pin `<thead>` during vertical scroll. Needs an ancestor that actually scrolls — give the wrapper a `max-height`, since on its own it only scrolls horizontally.
`wrapper`	`boolean`	`true`	Render the scroll container. Turn it off only when you are supplying your own.
`wrapperClassName`	`string`	`undefined`	Class for the scroll container. `className` goes on the `<table>`.
`children`	`React.ReactNode`	`undefined`
`className`	`string`	`undefined`

`<TableSortHeader>` props

a sortable header cell rendering the indicator and aria-sort for the state you pass

Prop	Type	Default	Description
`sort`	`'asc'\|'desc'\|null`	`null`	Which indicator to show. `null` shows the neutral, sortable arrow.
`children`	`React.ReactNode`	`undefined`
`className`	`string`	`undefined`

Basic usage

Wrap <table> in .corn-table-wrapper to enable horizontal scroll on small screens.

import '@corndev/ui/theme';

<div class="corn-table-wrapper">
  <table class="corn-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Role</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>Engineer</td>
        <td>Active</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>Designer</td>
        <td>Active</td>
      </tr>
    </tbody>
  </table>
</div>

Hoverable rows

<table class="corn-table" data-hoverable>...</table>

Striped rows

<table class="corn-table" data-striped>...</table>

Bordered

<table class="corn-table" data-bordered>...</table>

Keeps the <thead> visible when the table scrolls. Apply to the table inside a height-constrained wrapper.

<div class="corn-table-wrapper" style="max-height: 320px; overflow-y: auto;">
  <table class="corn-table" data-sticky-header>...</table>
</div>

Sortable columns

Add data-sortable to any <th> to show a sort affordance. Set data-sort="asc" or data-sort="desc" to indicate the active sort direction.

<thead>
  <tr>
    <th class="" data-sortable data-sort="asc">Name</th>
    <th class="" data-sortable>Date</th>
    <th>Status</th>
  </tr>
</thead>

Combining modifiers

<table class="corn-table" data-hoverable data-striped data-sticky-header>
  ...
</table>