ℹ️ Data tables are available as <BcTable>.

Data tables styles rely on semantic <table> markup.

• Use correctly structure HTML table markup
  • For guidance, see MDN’s <table>: The Table element.
• By default, table headings are column-scoped
  • Use the scope attribute to change scope to the row when needed
  • See MDN: <table>: Scoping rows and columns.
• Beyond single columns and rows, group cells accessibly using <colgroup>
  • Note multi-level table headers are treated differently, using the <td>’s headers attribute.

Missing element features

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

The following variants are available:

⚠️ 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.

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.

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.

• HTML definition lists generally (<dl>, <dt>, and <dd>)
• MDN: <table>: The Table element