Table is a component that displays data in a structured format. It is used to display data in a table format.
Name | Role | Ability | Ship | Status |
---|---|---|---|---|
Neo (Thomas Anderson) | The One | Code manipulation, Flight | Nebuchadnezzar | Awakened |
Trinity | First Mate | Hacking, Combat | Nebuchadnezzar | Awakened |
Morpheus | Captain | Leadership, Combat | Nebuchadnezzar | Awakened |
Agent Smith | Agent | Replication, Possession | None | Program |
Cypher | Operator | Matrix Monitoring | Nebuchadnezzar | Traitor |
Oracle | Guide | Foresight | None | Program |
Niobe | Captain | Piloting, Combat | Logos | Awakened |
Tank | Operator | Matrix Monitoring | Nebuchadnezzar | Born Free |
"use client" import Table from "@radui/ui/Table"; const columns = [ { name: 'Name', id: 'name' }, { name: 'Role', id: 'role' }, { name: 'Ability', id: 'ability' }, { name: 'Ship', id: 'ship' }, { name: 'Status', id: 'status' } ]; const data = [ { id: '1', name: 'Neo (Thomas Anderson)', role: 'The One', ability: 'Code manipulation, Flight', ship: 'Nebuchadnezzar', status: 'Awakened' }, { id: '2', name: 'Trinity', role: 'First Mate', ability: 'Hacking, Combat', ship: 'Nebuchadnezzar', status: 'Awakened' }, { id: '3', name: 'Morpheus', role: 'Captain', ability: 'Leadership, Combat', ship: 'Nebuchadnezzar', status: 'Awakened' }, { id: '4', name: 'Agent Smith', role: 'Agent', ability: 'Replication, Possession', ship: 'None', status: 'Program' }, { id: '5', name: 'Cypher', role: 'Operator', ability: 'Matrix Monitoring', ship: 'Nebuchadnezzar', status: 'Traitor' }, { id: '6', name: 'Oracle', role: 'Guide', ability: 'Foresight', ship: 'None', status: 'Program' }, { id: '7', name: 'Niobe', role: 'Captain', ability: 'Piloting, Combat', ship: 'Logos', status: 'Awakened' }, { id: '8', name: 'Tank', role: 'Operator', ability: 'Matrix Monitoring', ship: 'Nebuchadnezzar', status: 'Born Free' } ]; const TableExample = () => { return ( <div className="w-full max-w-4xl"> <Table.Root> <Table.Head> <Table.Row> {columns.map((column) => ( <Table.ColumnCellHeader key={column.id}> {column.name} </Table.ColumnCellHeader> ))} </Table.Row> </Table.Head> <Table.Body> {data.map((row) => ( <Table.Row key={row.id}> {columns.map((column) => ( <Table.Cell key={`${row.id}-${column.id}`}> {row[column.id]} </Table.Cell> ))} </Table.Row> ))} </Table.Body> </Table.Root> </div>) } export default TableExample;
Import all parts of the component and piece them together
import Table from "@radui/ui/Table"; export default () => { return ( <Table.Root> <Table.Head> <Table.Row> <Table.ColumnHeader/> </Table.Row> </Table.Head> <Table.Body> <Table.Row> <Table.Cell/> </Table.Row> </Table.Body> </Table.Root> ) }
The root component for the Table.
Prop | Type | Default |
---|---|---|
className | string | -- |
children |
The head component for the Table.
Prop | Type | Default |
---|---|---|
className | string | -- |
children |
The body component for the Table.
Prop | Type | Default |
---|---|---|
className | string | -- |
children |
The row component for the Table.
Prop | Type | Default |
---|---|---|
className | string | -- |
children |
The column header component for the Table.
Prop | Type | Default |
---|---|---|
className | string | -- |
children |
The cell component for the Table.
Prop | Type | Default |
---|---|---|
className | string | -- |
children | ReactNode |