Table

Table wrapper with zebra striping and compact density.

NameEmailRole
John Doejohn@example.comAdmin
Jane Smithjane@example.comUser
NameEmailRole
User 1user1@example.comAdmin
User 2user2@example.comUser
User 3user3@example.comUser
User 4user4@example.comAdmin
User 5user5@example.comUser
User 6user6@example.comUser
User 7user7@example.comAdmin
User 8user8@example.comUser
User 9user9@example.comUser
User 10user10@example.comAdmin
User 11user11@example.comUser
User 12user12@example.comUser

Usage

import {Table} from 'kinu';

<Table>
  <thead>...</thead>
  <tbody>...</tbody>
</Table>

Exports

Name Description Rendered HTML
Table Data table <table k="table">

Notes

  • Uses native <table> markup so semantics stay intact.
  • Pass sticky to make <thead> cells stick to the top of the nearest scroll container. Wrap the table in a scrollable element (e.g. <div style={{maxHeight: '12rem', overflow: 'auto'}}>) so the header has somewhere to stick relative to.

_Source: src/components/table/index.tsx