Th

<lynk-th> | LynkTh

stable

Since 1.0.0

Table <lynk-th> components will behave like a native <th> HTML element within a <lynk-table>.

These elements are intended to behave like <th> HTML elements.

Column A

Column B

<lynk-table>
  <lynk-thead>
    <lynk-tr>
      <lynk-th key="colA" sortable>Column A</lynk-th>
      <lynk-th key="colB" sortable>Column B</lynk-th>
    </lynk-tr>
  </lynk-thead>
  <lynk-tbody>
    <lynk-tr>
      <lynk-td>A1</lynk-td>
      <lynk-td>B1</lynk-td>
    </lynk-tr>
    <lynk-tr>
      <lynk-td>A2</lynk-td>
      <lynk-td>B2</lynk-td>
    </lynk-tr>
  </lynk-tbody>
</lynk-table>

Examples

Sorting

<lynk-table id="exampleSorting"></lynk-table>
<script>
  // note: this script would usually be replaced with data bindings provided by your web framework
  const table = document.getElementById('exampleSorting');
  table.cols = [
    {
      key: 'a',
      sortable: true,
      title: 'Column A'
    },
    {
      key: 'b',
      sortable: true,
      title: 'Column B'
    }
  ];
  table.rows = [
    {
      a: 'Row 1 Column A',
      b: 'Row 1 Column B'
    },
    {
      a: 'Row 2 Column A',
      b: 'Row 2 Column B'
    },
    {
      a: 'Row 3 Column A',
      b: 'Row 3 Column B'
    }
  ];
</script>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler

To import this component using a bundler:

import '@uplynk/lynk-design/dist/components/th/th.js';

Slots

Name	Description
(default)	The table column header label

Learn more about using slots.

Properties

Name	Description	Type	Default
`key`	The column key associated with this table header	`string`	-
`sortDirection` `sort-direction`	The sorting direction currently applied to the rows with the corresponding column key	-	-
`sortable`	Toggles sort events and the display of sorting related icons with the corresponding column key	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name	React Event	Description	Event Detail
`ev-table-sort`	`EvTableSort`	Emitted when a sortable table header is clicked on.	-

Learn more about events.