IssueTable

The issue list of a project on the shared Table, with sorting, empty, loading and error states. Pick stack, the default, to turn rows into cards below 36rem, or scroll to keep the grid in its own scrolling box.

IssueTable

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, IssueTable

Open issues
	Title	Type	Status		Assignee	Updated
SK-101	Search suggestions skip words with accented letters search backend	Bug	To do	Urgent	Ada Lovelace	2 hours ago
SK-102	Keyboard shortcut sheet for the editor frontend accessibility	Feature	In progress	High	Grace Hopper	yesterday
SK-103	Move the export queue to a background worker so large projects no longer time out while the archive is being built backend performance docs search frontend	Improvement	In review	Medium	Unassigned	2 days ago
SK-104	Write the getting started guide docs	Task	Done	Low	Alan Turing	last week
SK-106	Drop the legacy import format	Task	Won’t do	Low	Unassigned	last month
SK-105	Offline mode	Epic	Backlog	Lowest	Katherine Johnson	3 weeks ago

Due this week, scrolling in its own box
Key	Title	Status	Assignee	Due
SK-101	Search suggestions skip words with accented letters search backend	To do	Ada Lovelace	5 Nov Overdue
SK-102	Keyboard shortcut sheet for the editor frontend accessibility	In progress	Grace Hopper	20 Nov
SK-103	Move the export queue to a background worker so large projects no longer time out while the archive is being built backend performance docs search frontend	In review	Unassigned

Empty
Key	Title
No issues match these filters.

Loading
Key	Title
Loading issues

Error
Key	Title
Could not load issues. Try again.

Dark theme, IssueTable

Open issues
	Title	Type	Status		Assignee	Updated
SK-101	Search suggestions skip words with accented letters search backend	Bug	To do	Urgent	Ada Lovelace	2 hours ago
SK-102	Keyboard shortcut sheet for the editor frontend accessibility	Feature	In progress	High	Grace Hopper	yesterday
SK-103	Move the export queue to a background worker so large projects no longer time out while the archive is being built backend performance docs search frontend	Improvement	In review	Medium	Unassigned	2 days ago
SK-104	Write the getting started guide docs	Task	Done	Low	Alan Turing	last week
SK-106	Drop the legacy import format	Task	Won’t do	Low	Unassigned	last month
SK-105	Offline mode	Epic	Backlog	Lowest	Katherine Johnson	3 weeks ago

Due this week, scrolling in its own box
Key	Title	Status	Assignee	Due
SK-101	Search suggestions skip words with accented letters search backend	To do	Ada Lovelace	5 Nov Overdue
SK-102	Keyboard shortcut sheet for the editor frontend accessibility	In progress	Grace Hopper	20 Nov
SK-103	Move the export queue to a background worker so large projects no longer time out while the archive is being built backend performance docs search frontend	In review	Unassigned

Empty
Key	Title
No issues match these filters.

Loading
Key	Title
Loading issues

Error
Key	Title
Could not load issues. Try again.

High contrast theme, IssueTable

Open issues
	Title	Type	Status		Assignee	Updated
SK-101	Search suggestions skip words with accented letters search backend	Bug	To do	Urgent	Ada Lovelace	2 hours ago
SK-102	Keyboard shortcut sheet for the editor frontend accessibility	Feature	In progress	High	Grace Hopper	yesterday
SK-103	Move the export queue to a background worker so large projects no longer time out while the archive is being built backend performance docs search frontend	Improvement	In review	Medium	Unassigned	2 days ago
SK-104	Write the getting started guide docs	Task	Done	Low	Alan Turing	last week
SK-106	Drop the legacy import format	Task	Won’t do	Low	Unassigned	last month
SK-105	Offline mode	Epic	Backlog	Lowest	Katherine Johnson	3 weeks ago

Due this week, scrolling in its own box
Key	Title	Status	Assignee	Due
SK-101	Search suggestions skip words with accented letters search backend	To do	Ada Lovelace	5 Nov Overdue
SK-102	Keyboard shortcut sheet for the editor frontend accessibility	In progress	Grace Hopper	20 Nov
SK-103	Move the export queue to a background worker so large projects no longer time out while the archive is being built backend performance docs search frontend	In review	Unassigned

Empty
Key	Title
No issues match these filters.

Loading
Key	Title
Loading issues

Error
Key	Title
Could not load issues. Try again.

UsageLink to the section Usage

tsx

import { IssueTable } from '@skribly/ui/tracker'

tsx

<IssueTable caption={t('issues.open')} issues={issues} headers={headers}
  labelsLabel={t('fields.labels')} unassignedLabel={t('issue.unassigned')}
  sort={sort} onSortChange={setSort} sortable={['key', 'priority']} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A native table with a caption, column headers and the title as row header.
Sortable headers are buttons and carry aria-sort.
In the stacked layout each cell keeps its column name as a visible label and the table roles stay in place.
Loading is a polite status, an error is an assertive alert with an icon.

This demo runs through axe in all three themes on every test run. See what the tests check.