Search

⌘K
Something

Table

This components allows you to create a table with a header and body. There are 6 components that you can use to create a table.

  • TableContainer: The container of the table that allow the table can horizontal scroll.
  • Table: The wrapper components.
  • TableHead: The header of the table.
  • TableBody: The body of the table.
  • TableRow: The row of the table.
  • TableColumn: The column of the table.

The usage of table is the same as the html table.

This components. Store at src/components/atoms/table

Basic example

This is the basic example of how to use the table. Just like the html table but have table container.

ExampleCode
Column 1Column 2Column 3
Row 1Row 1Row 1
Row 2Row 2Row 2
Row 3Row 3Row 3

Table container attributes

id
string
This is the id of the table container.
className
string
This is the className of the table container.
children
React.ReactNode
This is the children of the table container.

Table attributes

id
string
This is the id of the table.
className
string
This is the className of the table.
children
React.ReactNode
This is the children of the table.

Table head attributes

id
string
This is the id of the table head.
className
string
This is the className of the table head.
children
React.ReactNode
This is the children of the table head.

Table row attributes

id
string
This is the id of the table row.
className
string
This is the className of the table row.
children
React.ReactNode
This is the children of the table row.

Table column attributes

id
string
This is the id of the table column.
className
string
This is the className of the table column.
children
React.ReactNode
This is the children of the table column.
onClick
Function
This is the onClick event of the table column.
rowSpan
number
This is the rowSpan of the table column.
colSpan
number
This is the colSpan of the table column.

Copyright 2025 by Prine Components

Term of service

|

Privacy statement