Table

Data table for displaying structured information in rows and columns. Supports divider styles, mobile layout, and RTL.

Loading demo: table-real-world

Installation

npx sdaia-ui@latest add table

import { Table } from "@/components/ui/table"

<Table />

Basic table with no dividers.

Loading demo: table-default

Table with horizontal dividers between rows.

Loading demo: table-horizontal-dividers

Table with vertical dividers between columns.

Loading demo: table-vertical-dividers

Table with both horizontal and vertical dividers.

Loading demo: table-full-dividers

Table layout optimised for mobile screens.

Loading demo: table-mobile

Props for the Table component.

Prop	Type	Default	Required
title	ReactNode	-	optional
description	ReactNode	-	optional
headerActions	ReactNode	-	optional
showMoreIcon	boolean	-	optional
onMoreClick	() => void	-	optional
hideHeader	boolean	false	optional
columns	TableColumn[]	-	required
rows	TableRowData[]	-	required
divider	'none' \| 'horizontal' \| 'vertical' \| 'both'	'none'	optional
sortKey	string	-	optional
sortDirection	'asc' \| 'desc'	-	optional
onSort	(key: string, direction: TableSortDirection) => void	-	optional
showPagination	boolean	false	optional
page	number	1	optional
totalPages	number	1	optional
onPageChange	(page: number) => void	-	optional
mobile	boolean	false	optional