Table is a component that displays data in a structured format. It is used to display data in a table format.

NameRoleAbilityShipStatus
Neo (Thomas Anderson)The OneCode manipulation, FlightNebuchadnezzarAwakened
TrinityFirst MateHacking, CombatNebuchadnezzarAwakened
MorpheusCaptainLeadership, CombatNebuchadnezzarAwakened
Agent SmithAgentReplication, PossessionNoneProgram
CypherOperatorMatrix MonitoringNebuchadnezzarTraitor
OracleGuideForesightNoneProgram
NiobeCaptainPiloting, CombatLogosAwakened
TankOperatorMatrix MonitoringNebuchadnezzarBorn 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.

PropTypeDefault

className

string--

children

The head component for the Table.

PropTypeDefault

className

string--

children

The body component for the Table.

PropTypeDefault

className

string--

children

The row component for the Table.

PropTypeDefault

className

string--

children

The column header component for the Table.

PropTypeDefault

className

string--

children

The cell component for the Table.

PropTypeDefault

className

string--

children

ReactNode