Data Tables

Last modified:

Responsive tables for displaying tabular data. Use to group tabular data (eg. listing users, financial information, etc.).


Example of Data Tables - default

React documentation

Last modified:

ℹ️ Data tables are available as <BcTable>.


Last modified:

Data tables styles rely on semantic <table> markup.

Missing element features

Data tables do not yet provide specific styles for table <caption> or <tfoot>, but both should be easily usable.


Last modified:

The following variants are available:

.bc-table--uiResets the colors of links/anchors to black.
.bc-table--stripedAdds zebra-striping to each even row.
.bc-table--smallLowers the text size of the entire table.
.bc-table--unruledRemoves the border-bottom from each row.
.bc-table--borderedWraps entire table inside a panel Intended to be used with the --bordered variant..
.bc-table--unresponsiveSets table to use fixed layout on all breakpoints, turning off default responsive behavior.
.bc-table--stickySets either the first <td> or all <th> cells to position: sticky once it reaches the top of the scroll area (depending on media breakpoint).

⚠️ Careful with .bc-table--unresponsive: Use only when table contains minimal data that will not overflow on the smallest viewport sizes (xs to <md).

⚠️ Careful with .bc-table--sticky: This variant doesn’t yet support chaining with bc-table--unresponsive.

Responsive features

Data tables are by default responsive. Each table row is broken down into a panel-style block at small viewport sizes. This avoids horizontal overflow and likely breaking the page’s grid layout.

At <md breakpoint the table headings (<th>) are hidden, but re-inserted into each row’s block using a custom HTML data attribute and a matching CSS selector.

To ensure your table is responsive add the corresponding data-label for each <th>. This must be identical to the title string.

Customizing row or column widths

There are limited DS-provided options.

You will need to set custom CSS widths.

  • Use a relative unit (eg. percentages)
  • Only apply custom widths for responsive tables at ≥md breakpoint!
    • 💡 Tip: Use the bc-media(md) { width: …; } mixin nested within a custom class.

Note table-layout is not set by Data tables (and thus remains set to its initial default of auto).

Grouping and combining cells

Use <colgroup>s to group cells.

Use colspan and rowspan to combine cells.

Data cell styling

Use the following child classes to format individual cells. Apply them directly to table <th> and/or <td>s cells.

  • .bc-table__th-abbr for table heading (cells) that are abbreviations
    • Sets text-transform: uppercase.
  • .bc-table__cell-right to right-align text, eg. for aligning monetary values in a column against the period separating dollars and cents
    • Sets text-align: right.
  • .bc-table__cell-numeric for numeric data
    • Makes for easier visual comparison of numeric values by setting their character width to be uniform (effectively monospaced)
    • Sets font-variant-numeric: tabular-nums
      • If supported via @supports; otherwise sets the monospaced font-family stack as fallback.


Last modified:

Data tables must use semantic <table> markup.

  • For Data tables to be responsive and accessible, data-labels must be present on each <th>
    • Makes this identical with the title — just like the <th> this string must be human-readable.
  • Follow MDN’s HTML table advanced features and accessibility guidance
  • Use ARIA markup to integrate advanced features such as column sorting, pagination, or view filters, etc.
    • Eg. see CCSortableTableHeader in Platform.

See also the HTML guidance.


Last modified:

Tables are a commonly understood way of arranging data into columns and rows.

When enhanced with interactive sorting or filtering functionality they become powerful tools for structuring information.

See also

Last modified: