CSC Design System Skills & Best Practices
Ctrl K
CS
On this page

Proposed CSC Standards · 0.1.0

Data tables

Rows of records with sort, selection, empty, and loading behavior.

Let a person scan, sort, and act on many records.

Live componentResponsive playground

What this describes

Demonstration data only.

Sample Applicant ACSC-24081Central OfficeApproved
Sample Applicant BCSC-24082NCRPending
Sample Applicant CCSC-24083Region VIIApproved
Sample Applicant DCSC-24084CARReview
Sample Applicant ECSC-24085BARMMPending
Page 1
Default

Demonstration data only.

Sample Applicant ACSC-24081Central OfficeApproved
Sample Applicant BCSC-24082NCRPending
Sample Applicant CCSC-24083Region VIIApproved
Sample Applicant DCSC-24084CARReview
Sample Applicant ECSC-24085BARMMPending
Page 1
Standard

Demonstration data only.

Sample Applicant ACSC-24081Central OfficeApproved
Sample Applicant BCSC-24082NCRPending
Sample Applicant CCSC-24083Region VIIApproved
Sample Applicant DCSC-24084CARReview
Sample Applicant ECSC-24085BARMMPending
Page 1
Compact

Demonstration data only.

Sample Applicant ACSC-24081Central OfficeApproved
Sample Applicant BCSC-24082NCRPending
Sample Applicant CCSC-24083Region VIIApproved
Sample Applicant DCSC-24084CARReview
Sample Applicant ECSC-24085BARMMPending
Page 1
Spacious

Demonstration data only.

Sample Applicant A

CSC-24081 · Central Office

Approved
Sample Applicant B

CSC-24082 · NCR

Pending
Sample Applicant C

CSC-24083 · Region VII

Approved
Sample Applicant D

CSC-24084 · CAR

Review
Sample Applicant E

CSC-24085 · BARMM

Pending
Page 1
Card layout

When to use

  • The data is a set of records with the same columns.
  • The person compares rows.

When not to use

  • A single record. Use a description list or Card.
  • A short option list. Use SelectField.

Allowed variants

Standard

The default record grid.

Hierarchy
Full table.
Use in
Desktop and tablet.
Restriction
Keep header cells.
Accessibility
th cells and sort buttons.
Responsive
Scroll inside the region or switch to cards.

Compact

More rows on screen.

Hierarchy
Reduced padding.
Use in
Expert tools.
Restriction
Row actions still meet 24 CSS pixels.
Accessibility
Do not shrink text below the point where contrast and readability fail.
Responsive
Prefer cards on a phone instead of a dense grid.

Spacious

Rows that include a second line of detail.

Hierarchy
Taller rows.
Use in
Records with a subtitle.
Restriction
Do not use spacious for a 20-column sheet.
Accessibility
Same header rules.
Responsive
Stacks poorly. Use cards under 760px.

Card layout

The narrow-screen presentation of the same records.

Hierarchy
One record per card.
Use in
Under 760px.
Restriction
Each card still shows the column labels as text.
Accessibility
Do not drop the field names.
Responsive
This is the overflow strategy.

Mandatory rules

TBL-001RequiredHTML

Use a table with column headers

Standard, dense, and spacious variants render a table with header cells.

Implementation detail

Header cells create the relationships a screen reader uses to move by column.

Use DataTable. Do not rebuild the grid with divs.

Check: Header cells are th elements associated with the columns.

Source

TBL-002ConditionalARIA

Sort with a button and an announced direction

A sortable header is a button, and the sorted column exposes ascending or descending.

Implementation detail

A clickable header text is not a control. aria-sort communicates the direction.

Keep the sort control a button. Set aria-sort on the sorted header.

Applies when: The table can be sorted.

Check: Activating the header toggles direction and the header announces it.

Source

TBL-003RequiredProposed CSC convention

Contain horizontal overflow inside the table

A wide table scrolls inside its region. The page does not scroll sideways.

Implementation detail

Proposed CSC Standard. Page-level horizontal scroll hides the sidebar and the row actions.

Use the card layout variant under 760px, or an overflow region around the table only.

Check: At 375px, document scrollWidth equals the viewport. The table region may scroll on its own.

TBL-004RequiredProposed CSC convention

Show an empty state in words

Zero rows render a sentence, not a blank table body.

Implementation detail

Proposed CSC Standard. A blank body looks like a loading failure.

When the filtered row count is zero, show “No records match” or the product’s equivalent.

Check: Clearing the filter to nothing shows the empty message.

TBL-005RecommendedProposed CSC convention

Show a loading state that is not a layout jump

While rows load, the table keeps its caption or a text status.

Implementation detail

Proposed CSC Standard. A spinner with no text does not tell a screen reader that data is loading.

Expose text such as Loading records and aria-busy on the region.

Check: During load, the status is announced or present as text.

TBL-006ConditionalWCAG

Name row selection

A selection checkbox has an accessible name that includes the row identity.

Implementation detail

A column of unlabeled checkboxes is announced as a repeated “checkbox”.

Include the record name in the checkbox name, and name the select-all checkbox.

Applies when: Rows can be selected.

Check: Each checkbox name identifies its row.

Source

TBL-007RecommendedFramework

Paginate or virtualize large sets

Do not render an unbounded row list in the first paint.

Implementation detail

A multi-thousand-row table blocks the main thread and makes the footer unreachable.

Use Pagination with the table, or the card layout for a short mobile list.

Check: The first view has a bounded number of rows and a way to reach the rest.

Restrictions

  • TBL-002 Sort with a button and an announced direction. The table can be sorted.
  • TBL-006 Name row selection. Rows can be selected.

Accessibility

  • Header cells.
  • Sort buttons announce direction.
  • Selection checkboxes include the row name.
  • Empty and loading states are text.

Responsive behavior

  • Under 760px prefer the cards variant.
  • If the table remains, only the table region scrolls horizontally.
  • Toolbar search wraps above the table.

Component states

Ready

Rows and headers visible.

Demonstration data only.

Sample Applicant ACSC-24081Central OfficeApproved
Sample Applicant BCSC-24082NCRPending
Sample Applicant CCSC-24083Region VIIApproved
Sample Applicant DCSC-24084CARReview
Sample Applicant ECSC-24085BARMMPending
Page 1

Sorted

One column shows direction.

Demonstration data only.

Sample Applicant ACSC-24081Central OfficeApproved
Sample Applicant BCSC-24082NCRPending
Sample Applicant CCSC-24083Region VIIApproved
Sample Applicant DCSC-24084CARReview
Sample Applicant ECSC-24085BARMMPending
Page 1

Empty

A text message replaces a blank body.

Demonstration data only.

Sample Applicant ACSC-24081Central OfficeApproved
Sample Applicant BCSC-24082NCRPending
Sample Applicant CCSC-24083Region VIIApproved
Sample Applicant DCSC-24084CARReview
Sample Applicant ECSC-24085BARMMPending
Page 1

Loading

A text status is present.

Demonstration data only.

Sample Applicant ACSC-24081Central OfficeApproved
Sample Applicant BCSC-24082NCRPending
Sample Applicant CCSC-24083Region VIIApproved
Sample Applicant DCSC-24084CARReview
Sample Applicant ECSC-24085BARMMPending
Page 1

Selected

Named checkboxes when selection exists.

Demonstration data only.

Sample Applicant ACSC-24081Central OfficeApproved
Sample Applicant BCSC-24082NCRPending
Sample Applicant CCSC-24083Region VIIApproved
Sample Applicant DCSC-24084CARReview
Sample Applicant ECSC-24085BARMMPending
Page 1

Correct implementation

Standard tableCorrect implementation · TSX

Column headers name the cells. The table is real tabular data.

Imports: None. Dependencies: None. Rules: TBL-001.

export function Records() {
  return (
    <table>
      <caption>Applications</caption>
      <thead><tr><th>Name</th><th>Status</th></tr></thead>
      <tbody><tr><td>Sample applicant</td><td>Pending</td></tr></tbody>
    </table>
  );
}
Card layout on a narrow screenResponsive implementation · TSX

On a narrow screen each record keeps its field name beside the value.

Imports: None. Dependencies: None. Rules: TBL-003.

export function MobileRecords() {
  return (
    <article style={{ border: '1px solid #E7EBF2', borderRadius: 11, padding: 16 }}>
      <p>Name: Sample applicant</p>
      <p>Status: Pending</p>
    </article>
  );
}

Incorrect implementation

Div gridIncorrect implementation · TSX · Illustrative

Divs do not create header relationships.

Imports: None. Dependencies: None. Rules: TBL-001.

export function FakeTable() {
  return <div><div>Name</div><div>Ana Cruz</div></div>;
}

Common mistakes

  • Div grids that look like tables.
  • Page-level horizontal scroll.
  • Unlabeled row checkboxes.
  • A blank body when the filter matches nothing.

Testing checklist

Agent prompts for this component are in the AI Development Hub.