Table
import Table, { Thead, Trow, Tcol } from 'frui/Table'; Copy
Props
| Name | Type | For Element | Required | Notes |
|---|---|---|---|---|
| className | string | No | Standard HTML class names | |
| colSpan | boolean | Thead, Tfoot, Tcol | No | How many columns this cell will cover |
| noWrap | boolean | Thead, Tfoot, Tcol | No | Keeps all text in one line |
| rowSpan | boolean | Tcol | No | How many rows this cell will cover |
| stickyBottom | boolean | Tfoot | No | Always show on the bottom, even on overflow |
| stickyLeft | boolean | Thead, Tfoot, Tcol | No | Always show on the left, even on overflow |
| stickyRight | boolean | Thead, Tfoot, Tcol | No | Always show on the right, even on overflow |
| stickyTop | boolean | Thead | No | Always show on the top, even on overflow |
| style | CSS Object | All | No | Standard CSS input |
| wrap1 | boolean | Thead, Tfoot, Tcol | No | Keeps the cell size a minimum of 100px |
| wrap2 | boolean | Thead, Tfoot, Tcol | No | Keeps the cell size a minimum of 200px |
| wrap3 | boolean | Thead, Tfoot, Tcol | No | Keeps the cell size a minimum of 300px |
| wrap4 | boolean | Thead, Tfoot, Tcol | No | Keeps the cell size a minimum of 400px |
| wrap5 | boolean | Thead, Tfoot, Tcol | No | Keeps the cell size a minimum of 500px |
Basic
Tables do not need: thead, and tbody elements as in the following basic example.
| ID | Name | Active | Created | Updated |
|---|---|---|---|---|
| 1 | John Doe | Yes | 2021-01-01 | 2021-01-01 |
| 2 | Jane Doe | No | 2021-01-01 | 2021-01-01 |
<Table className="w-full">
<Thead className="bg-b3 text-left">ID</Thead>
<Thead className="bg-b3 text-left">Name</Thead>
<Thead className="bg-b3 text-center">Active</Thead>
<Thead className="bg-b3 text-right">Created</Thead>
<Thead className="bg-b3 text-right">Updated</Thead>
<Trow>
<Tcol className="bg-b1">1</Tcol>
<Tcol className="bg-b1">John Doe</Tcol>
<Tcol className="bg-b1 text-center">Yes</Tcol>
<Tcol className="bg-b1 text-right">2021-01-01</Tcol>
<Tcol className="bg-b1 text-right">2021-01-01</Tcol>
</Trow>
<Trow>
<Tcol className="bg-b2">2</Tcol>
<Tcol className="bg-b2">Jane Doe</Tcol>
<Tcol className="bg-b2 text-center">No</Tcol>
<Tcol className="bg-b2 text-right">2021-01-01</Tcol>
<Tcol className="bg-b2 text-right">2021-01-01</Tcol>
</Trow>
</Table> Copy
Wrap & No Wrap
Headers and cell width can be manipulated using noWrap, wrap1, wrap2, wrap3, wrap4, and wrap5.
| ID | Name | Active | Created | Updated |
|---|---|---|---|---|
| 1 | Duis id ante leo. Morbi orci ex, porttitor nec turpis ac, rutrum laoreet tellus. Cras nulla justo, consectetur eget ante non, faucibus finibus velit. Phasellus mollis sapien egestas, convallis magna id, egestas eros. Donec mauris leo, cursus sit amet ullamcorper ac, pretium vitae massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae orci felis. Etiam finibus, massa vel semper sagittis, velit nulla hendrerit justo, in ultrices lorem magna vitae quam. | Yes | 2021-01-01 | 2021-01-01 |
| 2 | Maecenas enim nibh, tincidunt lacinia molestie id, dictum vel felis. Cras laoreet laoreet arcu eu tincidunt. Aenean hendrerit mi purus, id vestibulum ligula tempus nec. Praesent sollicitudin ligula et ipsum gravida viverra. Cras pretium neque arcu, vitae mollis orci iaculis et. Nullam egestas nec sem in mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque lobortis leo eu enim dapibus, at tempor metus egestas. Aliquam in eros ut erat fermentum volutpat ac in magna. Curabitur a magna at sem lacinia tristique ac ut nibh. Nulla erat nulla, mollis at finibus eget, mollis eu felis. | No | 2021-01-01 | 2021-01-01 |
<Table>
<Thead className="bg-b3 text-left">ID</Thead>
<Thead className="bg-b3 text-left">Name</Thead>
<Thead className="bg-b3 text-center">Active</Thead>
<Thead className="bg-b3 text-right">Created</Thead>
<Thead className="bg-b3 text-right">Updated</Thead>
<Trow>
<Tcol className="bg-b1">1</Tcol>
<Tcol wrap3 className="bg-b1">
Duis id ante leo. Morbi orci ex, porttitor nec
turpis ac, rutrum laoreet tellus. Cras nulla
justo, consectetur eget ante non, faucibus
finibus velit. Phasellus mollis sapien egestas,
convallis magna id, egestas eros. Donec mauris
leo, cursus sit amet ullamcorper ac, pretium
vitae massa. Orci varius natoque penatibus et
magnis dis parturient montes, nascetur ridiculus
mus. Sed vitae orci felis. Etiam finibus, massa
vel semper sagittis, velit nulla hendrerit justo,
in ultrices lorem magna vitae quam.
</Tcol>
<Tcol className="bg-b1 text-center">Yes</Tcol>
<Tcol noWrap className="bg-b1 text-right">2021-01-01</Tcol>
<Tcol noWrap className="bg-b1 text-right">2021-01-01</Tcol>
</Trow>
<Trow>
<Tcol className="bg-b2">2</Tcol>
<Tcol wrap3 className="bg-b2">
Maecenas enim nibh, tincidunt lacinia molestie
id, dictum vel felis. Cras laoreet laoreet arcu
eu tincidunt. Aenean hendrerit mi purus, id
vestibulum ligula tempus nec. Praesent
sollicitudin ligula et ipsum gravida viverra.
Cras pretium neque arcu, vitae mollis orci
iaculis et. Nullam egestas nec sem in mollis.
Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia curae;
Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas.
Quisque lobortis leo eu enim dapibus, at tempor
metus egestas. Aliquam in eros ut erat fermentum
volutpat ac in magna. Curabitur a magna at sem lacinia
tristique ac ut nibh. Nulla erat nulla, mollis at
finibus eget, mollis eu felis.</Tcol>
<Tcol className="bg-b2 text-center">No</Tcol>
<Tcol noWrap className="bg-b2 text-right">2021-01-01</Tcol>
<Tcol noWrap className="bg-b2 text-right">2021-01-01</Tcol>
</Trow>
</Table> Copy
Sticky
Headers and cells can use a combination of stickLeft, stickyTop, stickyBottom, stickyRight to make tables in the mobile view responsive.
| ID | First Name | Last Name | Active | Created | Updated |
|---|---|---|---|---|---|
| 1 | John | Doe | Yes | 2021-01-01 | 2021-01-02 |
| 2 | Jane | Doe | No | 2021-02-03 | 2021-02-04 |
| 3 | Jack | Doe | No | 2021-03-05 | 2021-03-06 |
| 4 | Jan | Doe | No | 2021-04-07 | 2021-04-08 |
| 5 | Jimmy | Doe | Yes | 2021-05-09 | 2021-05-10 |
| 6 | Jenny | Doe | No | 2021-06-11 | 2021-06-12 |
<div className="h-64 w-72 overflow-auto">
<Table className="w-full">
<Thead stickyTop stickyLeft className="bg-b3 text-left">ID</Thead>
<Thead stickyTop noWrap className="bg-b3 text-left">First Name</Thead>
<Thead stickyTop noWrap className="bg-b3 text-left">Last Name</Thead>
<Thead stickyTop className="bg-b3 text-center">Active</Thead>
<Thead stickyTop className="bg-b3 text-right">Created</Thead>
<Thead stickyTop className="bg-b3 text-right">Updated</Thead>
<Trow>
<Tcol stickyLeft className="bg-b1">1</Tcol>
<Tcol className="bg-b1">John</Tcol>
<Tcol className="bg-b1">Doe</Tcol>
<Tcol className="bg-b1 text-center">Yes</Tcol>
<Tcol noWrap className="bg-b1 text-right">2021-01-01</Tcol>
<Tcol noWrap className="bg-b1 text-right">2021-01-02</Tcol>
</Trow>
<Trow>
<Tcol stickyLeft className="bg-b2">2</Tcol>
<Tcol className="bg-b2">Jane</Tcol>
<Tcol className="bg-b2">Doe</Tcol>
<Tcol className="bg-b2 text-center">No</Tcol>
<Tcol noWrap className="bg-b2 text-right">2021-02-03</Tcol>
<Tcol noWrap className="bg-b2 text-right">2021-02-04</Tcol>
</Trow>
<Trow>
<Tcol stickyLeft className="bg-b1">3</Tcol>
<Tcol className="bg-b1">Jack</Tcol>
<Tcol className="bg-b1">Doe</Tcol>
<Tcol className="bg-b1 text-center">No</Tcol>
<Tcol noWrap className="bg-b1 text-right">2021-03-05</Tcol>
<Tcol noWrap className="bg-b1 text-right">2021-03-06</Tcol>
</Trow>
<Trow>
<Tcol stickyLeft className="bg-b2">4</Tcol>
<Tcol className="bg-b2">Jan</Tcol>
<Tcol className="bg-b2">Doe</Tcol>
<Tcol className="bg-b2 text-center">No</Tcol>
<Tcol noWrap className="bg-b2 text-right">2021-04-07</Tcol>
<Tcol noWrap className="bg-b2 text-right">2021-04-08</Tcol>
</Trow>
<Trow>
<Tcol stickyLeft className="bg-b1">5</Tcol>
<Tcol className="bg-b1">Jimmy</Tcol>
<Tcol className="bg-b1">Doe</Tcol>
<Tcol className="bg-b1 text-center">Yes</Tcol>
<Tcol noWrap className="bg-b1 text-right">2021-05-09</Tcol>
<Tcol noWrap className="bg-b1 text-right">2021-05-10</Tcol>
</Trow>
<Trow>
<Tcol stickyLeft className="bg-b2">6</Tcol>
<Tcol className="bg-b2">Jenny</Tcol>
<Tcol className="bg-b2">Doe</Tcol>
<Tcol className="bg-b2 text-center">No</Tcol>
<Tcol noWrap className="bg-b2 text-right">2021-06-11</Tcol>
<Tcol noWrap className="bg-b2 text-right">2021-06-12</Tcol>
</Trow>
</Table>
</div> Copy
Custom Styles
You can add your own custom class to table components or use any combination of frui-tbl-col, frui-tbl-row, frui-tbl-head, and frui-tbl-foot CSS classes.