`<c-table>`

A styled wrapper for a table you author yourself: slot in a plain `<table>` and c-table gives it the CSC look plus an optional responsive card layout on narrow screens. The table stays in your own DOM — your stylesheets, your framework's rendering, and `::part()` selectors on components nested in cells (a `c-tag` status chip, a `c-pagination` footer) all keep working.

Usage

Write regular, semantic table markup: <thead> with <th> headers, <tbody> rows, optionally a <tfoot>. c-table styles it through a scoped stylesheet it installs once per page; it never takes the markup over, so rows added or removed by your framework are picked up automatically.

Responsive mode

With responsive, the table collapses into stacked cards when it is narrower than mobile-breakpoint (pixels, default 600). Each cell then shows a label cloned from its column header so the card stays readable without the header row.

Rows that should not receive labels (a full-width action row, a colspan summary) opt out with a no-mobile-labels attribute on the <tr>.
The labels are real <span class="c-table__mobile-label"> elements prepended into your cells, so your framework will see them. Label creation is idempotent, but if a keyed re-render replaces the cell elements, call the element's updateMobileLabels() method afterwards to restore them.

Styling

Cell content is yours to style: page CSS reaches everything inside the table, including ::part() on nested components. The table's own defaults are applied at c-table > table.c-table … specificity — to override one of them (say, cell padding), match that scope: c-table table.c-table td { padding: 8px; }.

Examples

Basic

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-table>
      <table>
        <thead>
          <tr>
            <th>Name</th>

            <th>Role</th>

            <th>Email</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Anna Virtanen</td>

            <td>Researcher</td>

            <td>anna.virtanen@example.fi</td>
          </tr>

          <tr>
            <td>Mikko Korhonen</td>

            <td>Data engineer</td>

            <td>mikko.korhonen@example.fi</td>
          </tr>

          <tr>
            <td>Sara Niemi</td>

            <td>Project manager</td>

            <td>sara.niemi@example.fi</td>
          </tr>
        </tbody>
      </table>
    </c-table>
  </div>
</template>

Responsive

Vue

React

Angular

TypeScript

<template>
  <div>
    <!-- Below the breakpoint each row becomes a card with header labels -->
    <c-table responsive mobile-breakpoint="800">
      <table>
        <thead>
          <tr>
            <th>Name</th>

            <th>Role</th>

            <th>Email</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Anna Virtanen</td>

            <td>Researcher</td>

            <td>anna.virtanen@example.fi</td>
          </tr>

          <tr>
            <td>Mikko Korhonen</td>

            <td>Data engineer</td>

            <td>mikko.korhonen@example.fi</td>
          </tr>
        </tbody>
      </table>
    </c-table>
  </div>
</template>

Styling

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-table>
      <table>
        <thead>
          <tr>
            <th>Service</th>

            <th>Status</th>

            <th>Owner</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Puhti</td>

            <td><c-tag class="tag-success" flat>Running</c-tag></td>

            <td>Anna Virtanen</td>
          </tr>

          <tr>
            <td>Mahti</td>

            <td><c-tag class="tag-warning" flat>Maintenance</c-tag></td>

            <td>Mikko Korhonen</td>
          </tr>

          <tr>
            <td>Allas</td>

            <td><c-tag class="tag-success" flat>Running</c-tag></td>

            <td>Sara Niemi</td>
          </tr>
        </tbody>
      </table>
    </c-table>
  </div>
</template>

<style>
/* The table stays in your DOM, so page CSS reaches components inside cells. */
c-tag.tag-success::part(root) {
  background-color: var(--c-success-subtle);
  color: var(--c-on-success-subtle);
  box-shadow: inset 0 0 0 1px var(--c-success);
}

c-tag.tag-warning::part(root) {
  background-color: var(--c-warning-subtle);
  color: var(--c-on-warning-subtle);
  box-shadow: inset 0 0 0 1px var(--c-warning);
}
</style>

API reference

`<c-table>`

Properties

Property	Attribute	Type	Default	Description
`mobileBreakpoint`	`mobile-breakpoint`	`number`	`600`	Mobile breakpoint in pixels
`responsive`	`responsive`	`boolean`	`false`	Should the table be responsive

Slots

Slot	Description
`default`	The consumer-authored `<table>` element