Table

Name: a13y
Rating: 5.0 (1 reviews)
Author: Diego Aneli

An accessible data table component with sorting, row selection, and custom cell rendering. Uses proper table semantics and ARIA attributes for screen readers.

Basic Usage

Sortable table with proper semantics.

User list
			Status
John Doe	john@example.com	Admin	Active
Jane Smith	jane@example.com	User	Active
Bob Johnson	bob@example.com	Editor	Inactive
Alice Williams	alice@example.com	User	Active
Charlie Brown	charlie@example.com	Admin	Active

import { AccessibleTable } from '@a13y/react';

const columns = [
  { id: 'name', header: 'Name', sortable: true },
  { id: 'email', header: 'Email', sortable: true },
  { id: 'role', header: 'Role' }
];

const data = [
  { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin' },
  { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
  { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'Editor' }
];

function Example() {
  return (
    <AccessibleTable
      caption="User list"
      columns={columns}
      data={data}
    />
  );
}

With Row Selection

Enable row selection with checkboxes.

Selectable user list
			Status
John Doe	john@example.com	Admin	Active
Jane Smith	jane@example.com	User	Active
Bob Johnson	bob@example.com	Editor	Inactive
Alice Williams	alice@example.com	User	Active
Charlie Brown	charlie@example.com	Admin	Active

Table Props

Name	Type	Default	Description
`caption*`	`string`	-	Table caption for accessibility
`columns*`	`TableColumn[]`	-	Array of column definitions
`data*`	`TableRow[]`	-	Array of data rows
`selectable`	`boolean`	`false`	Enable row selection with checkboxes
`selectedRows`	`string[]`	-	Array of selected row IDs (when selectable)
`onSelectionChange`	`(ids: string[]) => void`	-	Callback when selection changes
`onSort`	`(columnId: string, direction: "asc" \| "desc") => void`	-	Callback when column sort is triggered
`className`	`string`	-	Optional CSS class

TableColumn Props

Name	Type	Default	Description
`id*`	`string`	-	Unique column identifier
`header*`	`string`	-	Column header text
`sortable`	`boolean`	`false`	Whether the column is sortable
`render`	`(value: any, row: TableRow) => ReactNode`	-	Custom cell renderer function

Accessibility Features

✓Proper table semantics with table, thead, tbody, etc.
✓caption element for table description
✓Sortable columns use aria-sort
✓Row selection properly announced to screen readers
✓Keyboard accessible sort buttons and checkboxes