BodyRow

BodyRow represents the model of a <tr> element in <tbody>.

Usage

id: string

An id that uniquely identifies the row.

id may be delimited by > to represent the id of parent rows if they exist.

current: { attrs: BodyRowAttributes; props: BodyRowProps }

The attributes and plugin props of the <tr> element as plain reactive values. current.attrs is ready to spread onto the element; current.props holds each plugin’s props, keyed by plugin name. Both update in place as table and plugin state change. Reads outside a template or effect return the current value, and server rendering produces the same markup.

<tr {...row.current.attrs} class:selected={row.current.props.select.selected}>

<tr {...row.current.attrs} class:selected={row.current.props.select.selected}>

cells: BodyCell[]

An array of BodyCells to iterate over and apply onto <td> elements.

cells only includes the cells of visible columns.

cellForId: Record<string, BodyCell>

A record of column ids to BodyCells.

cellForId also includes hidden cells and is useful when you need to reference to a specific cell.

depth: number

The current depth of the row.

Starts at 0 for top-level rows and increases by one for each level of sub-row.

parentRow?: BodyRow

The parent row of the current row if it exists.

undefined if this row is not a sub-row.

subRows?: BodyRow[]

The sub rows of the current row if it exists. undefined if this row has no sub-rows.

By default, the following plugins can define sub-rows:

• addSubRows
• addGroupBy

isData: () => boolean

Returns true if the body row is an instance of DataBodyRow.

isDisplay: () => boolean

Returns true if the body row is an instance of DisplayBodyRow.

Variants

DisplayBodyRow

DisplayBodyRows represent rows which are not backed by any data item. These rows are usually the result of row aggregation with addGroupBy.

DataBodyRow

DataBodyRows represent rows which are backed by a data item from the data source.

dataId: string

The original id of the data item from the data source.

This can be configured during createViewModel.

original: Item

The original data item from the data source which backs this data row.

One common pattern is to define additional properties on the data items of the data source and access them via row.original.

<script>
  const data = [
    {
      name: "Ada Lovelace",
      age: 28,
      disabled: true,
    },
    {
      name: "Ken Thompson",
      age: 64,
      disabled: false,
    },
    ...
  ];
  ...
</script>
...
{#each vm.current.rows as row (row.id)}
  <tr {...row.current.attrs} class:disabled={row.original.disabled}>
    ...
  </tr>
{/each}

<script>
  const data = [
    {
      name: "Ada Lovelace",
      age: 28,
      disabled: true,
    },
    {
      name: "Ken Thompson",
      age: 64,
      disabled: false,
    },
    ...
  ];
  ...
</script>
...
{#each vm.current.rows as row (row.id)}
  <tr {...row.current.attrs} class:disabled={row.original.disabled}>
    ...
  </tr>
{/each}