Table Component

The Table component offers two flexible approaches for creating tables: a high-level component for simple data display and a composable API for complex custom tables.

Key Features

Two Usage Methods: High-level component or composable parts
Rich Styling: Striped rows, borders, and hover states
Accessibility: Semantic markup and ARIA support
Dynamic Data: Support for headers, body, and footer

Basic Usage

Method 1: High-Level Component

Perfect for simple data tables:

1
<Table
2
    headers={{
3
        columns: ['Name', 'Role', 'Department'],
4
    }}
5
    body={[
6
        ['John Doe', 'Developer', 'Engineering'],
7
        ['Jane Smith', 'Designer', 'Creative'],
8
        ['Mike Johnson', 'Manager', 'Operations'],
9
    ]}
10
/>

Method 2: Composable Parts

For more complex tables with custom markup:

1
<Table.Root striped borders="all">
2
    <Table.Header>
3
        <Table.Row>
4
            <Table.Head>Name</Table.Head>
5
            <Table.Head>Role</Table.Head>
6
            <Table.Head>Department</Table.Head>
7
        </Table.Row>
8
    </Table.Header>
9
    <Table.Body>
10
        <Table.Row>
11
            <Table.Cell>John Doe</Table.Cell>
12
            <Table.Cell>Developer</Table.Cell>
13
            <Table.Cell>Engineering</Table.Cell>
14
        </Table.Row>
15
    </Table.Body>
16
</Table.Root>

Component API

High-Level Component Props

Table Component Props Extends <table> HTMLElement
Prop	Type	Default	Description
headers	object		Column and row headers configuration
body	array[][]		Table data in 2D array format
caption	object		Optional caption with positioning
footer	boolean \| array[][]		Footer rows configuration
colorKey	array		Color legend configuration
striped	boolean	false	Enable striped rows
borders	"none" \| "horizontal" \| "vertical" \| "all"	all	Border style
textAlign	"top" \| "bottom" \| "center"	center	Cell content alignment

Composable Parts

Component	Props	Description
Table.Root	striped, borders, textAlign	Main table wrapper
Table.Header	class	Table header section
Table.Body	class	Table body section
Table.Row	cloneable, class	Table row
Table.Cell	class	Table cell
Table.Head	class	Header cell
Table.Footer	class	Footer section

JavaScript API

The Table component includes built-in methods for dynamic row management:

1
const table = await Ready(document.querySelector<TableElement>('table-wrapper'));
2

3
// Add new row
4
table.appendRow(['John Doe', 'Developer', 'Engineering']);
5

6
// Remove specific row
7
table.removeRow(1);
8

9
// Clear all rows
10
table.clearRows();

Implementation Example

1
---
2
import { Table } from '@/components/NST-components/UI/table/TableParts.astro';
3

4
const data = [ { id: 'INV001', status: 'Paid', method: 'Credit Card', amount: '$250.00' }, { id: 'INV002', status: 'Pending', method: 'PayPal', amount: '$150.00' }, { id: 'INV003', status: 'Paid', method: 'Bank Transfer', amount: '$350.00' } ];
5

6
---
7

8
<Table.Root striped borders="all" textAlign="center">
9
  <Table.Header>
10
    <Table.Row>
11
      <Table.Head>Invoice</Table.Head>
12
      <Table.Head>Status</Table.Head>
13
      <Table.Head>Method</Table.Head>
14
      <Table.Head>Amount</Table.Head>
15
    </Table.Row>
16
  </Table.Header>
17
  <Table.Body>
18
    {data.map((row) => (
19
      <Table.Row>
20
        <Table.Cell>{row.id}</Table.Cell>
21
        <Table.Cell>{row.status}</Table.Cell>
22
        <Table.Cell>{row.method}</Table.Cell>
23
        <Table.Cell>{row.amount}</Table.Cell>
24
      </Table.Row>
25
    ))}
26
  </Table.Body>
27
</Table.Root>

Performance Metrics
	Target	Impact
FCP	< 2s
TTI	< 3.5s	Critical
CLS	< 0.1	Medium

Performance Metrics
	Target	Impact
FCP	< 2s
TTI	< 3.5s	Critical
CLS	< 0.1	Medium
Result		Good

Limited Time Launch Sale

Build better data displays with our AstroJS starter template. Get the Table component and many more UI components ready to use in your next project.

GET 60% OFF!

Switch Table Of Contents

Directory