syidaxdesign system
Home Pricing Settings
ComponentsData display

Table

Compare data in rows and columns with sorting, filtering, and selection.

<sy-table>Installation guide Basic usage
Live preview
Interact with the component to see results here.
View code
HTML
<sy-table
  aria-label="Team work status"
  selection-mode="none"
  variant="horizontal"
  line-style="solid"
  id="sample"
></sy-table>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "columns": [{
        "key": "name",
        "label": "Name",
        "sortable": true,
        "filterable": true
      },
      {
        "key": "team",
        "label": "Team",
        "sortable": true,
        "filterable": true
      },
      {
        "key": "tasks",
        "label": "Complete",
        "sortable": true,
        "align": "right"
      }
    ],
    "rows": [{
        "id": "alex",
        "name": "Alex",
        "team": "Design",
        "tasks": 12
      },
      {
        "id": "jin",
        "name": "Jin",
        "team": "Design",
        "tasks": 8
      },
      {
        "id": "min",
        "name": "Min",
        "team": "Engineering",
        "tasks": 21
      },
      {
        "id": "sam",
        "name": "Sam",
        "team": "Engineering",
        "tasks": 15
      }
    ]
  });
</script>

Usage guide

#

Use for browsing, sorting, and selecting lightweight lists. Use Grid when large datasets require virtualization.

  1. Connect columns and data

    Pass key and label in columns, and a JavaScript array in rows.

  2. Set row identifiers

    Set rowKey to a stable, unique key.

  3. Enable the interactions you need

    Choose per-column sortable and filterable, set selectionMode to none, single, or multiple, and connect events to app state.

Feature examples

#

Choose a feature from 34 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code
HTML
Loading the example.

Property · Auto Merge

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Columns

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Compact

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Empty Text

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Hide Header

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Line Style

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Loading

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Resizable

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Row Header

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Rows

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Selection Mode

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Sort Direction

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Spans

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Sticky Header

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Sticky Row Header

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Striped

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Variant

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Methods · clearFilters

Use the example's buttons to call methods and inspect their results.

View code
HTML
Loading the example.

Methods · clearSelection

Use the example's buttons to call methods and inspect their results.

View code
HTML
Loading the example.

Methods · getSelectedRows

Use the example's buttons to call methods and inspect their results.

View code
HTML
Loading the example.

Methods · scrollToTop

Use the example's buttons to call methods and inspect their results.

View code
HTML
Loading the example.

Methods · setColumnFilter

Use the example's buttons to call methods and inspect their results.

View code
HTML
Loading the example.

Methods · setColumnWidth

Use the example's buttons to call methods and inspect their results.

View code
HTML
Loading the example.

Methods · setLoading

Use the example's buttons to call methods and inspect their results.

View code
HTML
Loading the example.

Methods · setSelectedKeys

Use the example's buttons to call methods and inspect their results.

View code
HTML
Loading the example.

Methods · setSort

Use the example's buttons to call methods and inspect their results.

View code
HTML
Loading the example.

Events · Column Resized

Interact with the component to see event names and payloads in the live preview below.

View code
HTML
Loading the example.

Events · Filter Changed

Interact with the component to see event names and payloads in the live preview below.

View code
HTML
Loading the example.

Events · Row Clicked

Interact with the component to see event names and payloads in the live preview below.

View code
HTML
Loading the example.

Events · Selection Changed

Interact with the component to see event names and payloads in the live preview below.

View code
HTML
Loading the example.

Events · Sort Changed

Interact with the component to see event names and payloads in the live preview below.

View code
HTML
Loading the example.

Slot ·

Compare the content placed inside the component with its slot names in the code.

View code
HTML
Loading the example.

Usage examples · Compact row spacing

compact reduces row spacing to fit more information in the same space.

View code
HTML
<sy-table
  aria-label="Team work status"
  selection-mode="none"
  variant="horizontal"
  line-style="solid"
  compact
  id="sample"
></sy-table>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "columns": [{
        "key": "name",
        "label": "Name",
        "sortable": true,
        "filterable": true
      },
      {
        "key": "team",
        "label": "Team",
        "sortable": true,
        "filterable": true
      },
      {
        "key": "tasks",
        "label": "Complete",
        "sortable": true,
        "align": "right"
      }
    ],
    "rows": [{
        "id": "alex",
        "name": "Alex",
        "team": "Design",
        "tasks": 12
      },
      {
        "id": "jin",
        "name": "Jin",
        "team": "Design",
        "tasks": 8
      },
      {
        "id": "min",
        "name": "Min",
        "team": "Engineering",
        "tasks": 21
      },
      {
        "id": "sam",
        "name": "Sam",
        "team": "Engineering",
        "tasks": 15
      }
    ]
  });
  const component2 = document.querySelector("#sample");
  Object.assign(component2, {
    "compact": true
  });
</script>

API reference

#

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

<sy-table>

Properties

Attribute / PropertyTypeDefaultDescription
SyTableColumn[] | string[]Array of column definitions with key, label, sortable, filterable, and other properties.

Pass objects and arrays as JavaScript properties.

SyTableRow[] | string[]Array of row data. Each row must have a unique key.

Pass objects and arrays as JavaScript properties.

SyTableRow[] | string''Alias of `rows`; takes precedence when set so consumers can bind data without choosing a name.

Pass objects and arrays as JavaScript properties.

string'id'Field name used to identify a row uniquely. Spec name: `row-key`.
'none' | 'single' | 'multiple''none'Selection mode. Spec name: `selection-mode`.
'none' | 'horizontal' | 'vertical' | 'full' | 'outline''horizontal'Display style for row, column, and outer borders.
'solid' | 'dashed' | 'dotted''solid'Border line style for every divider in the table — outer frame, column dividers (`variant: 'vertical' | 'full'`), and row dividers (`variant: 'horizontal' | 'full'`). Width and colour stay on the design-system tokens; only the dash pattern changes. Spec name: `line-style`.
booleanfalseAlternate row background colour.
booleanfalseReduce row height.
booleantruePin the header inside the scroll container. Spec name: `sticky-header`.
booleanfalseHide the column header (`<thead>`). Use when the table has columns but the visual design omits the header — e.g. the row-header pattern where the leftmost column already identifies each row, or when the header lives outside the table. Spec name: `hide-header`.
booleanfalseRender the first data column as a row header (`<th scope="row">`). Useful for grids where the leftmost column identifies the row (think spreadsheet row labels). Spec name: `row-header`.
booleantruePin the row header to the left edge while the body scrolls horizontally. Has no effect unless `row-header` is also set. Spec name: `sticky-row-header`.
string'No data'Empty-state text when no rows are present. Spec name: `empty-text`.
string''Currently sorted column key. Spec name: `sort-key`.
SyTableSortDirection'none'Active sort direction. Spec name: `sort-direction`.
string[] | string[]Array of currently selected row keys.

Pass objects and arrays as JavaScript properties.

booleanfalseIndicate that processing is in progress.
string''Optional accessible label applied to the `<table>` element.
booleanfalseAllow the user to drag a column's right edge to resize it. The new width is committed on pointer-up and a `columnResized` event fires. Resize state is keyed by `column.key` so initial `column.width` and explicit changes coexist. Drag handles appear on every cell (header + body) so the user can grab the column edge from any row.

Events

EventDetailDescription
CustomEvent<{ key: string; direction: SyTableSortDirection }>Read the result from the event's detail.
CustomEvent<{ selectedKeys: string[]; selectedRows: SyTableRow[] }>Read the result from the event's detail.
CustomEvent<{ row: SyTableRow; index: number; key: string; originalEvent: MouseEvent | KeyboardEvent }>Read the result from the event's detail.
CustomEvent<{ key: string; value: string; filters: Record<string, string> }>Fires after a column filter is applied or cleared. `value` is the committed text (empty string = filter cleared); `filters` is a snapshot of every active filter so consumers can serialize the entire filter set.
CustomEvent<{ key: string; width: number; widths: Record<string, number> }>Fires when a resize gesture commits the new width on pointer-up.

Methods

MethodReturnsDescription
Promise<SyTableRow[]>Return an array of selected row data.
Promise<void>Deselect all rows.
Promise<void>Select the row with the specified key.
Promise<void>Set a column's sort direction.
Promise<void>Toggle the loading indicator.
Promise<void>Scroll the table to the top.
Promise<void>Programmatically set or clear a column filter. Pass an empty string to clear. Bypasses the popover UI so consumers can drive filters from external controls (saved views, query string, etc.). Fires `filterChanged`.
Promise<Record<string, string>>Returns a snapshot of every active filter keyed by column key.
Promise<void>Clears every active filter at once. Fires `filterChanged` with `key: ''`.
Promise<void>Programmatically set the rendered width (in pixels) of a column. Pass `0` to revert to the column's intrinsic width.

Slots

SlotDescription
Component body or child items.
Design SystemTab Navigate Enter Open