Flo.w

# Data Table

<flow-data-table>
Reactive Stable

The data table component displays tabular data.

The data table component is a flexible component used to create tabular displays of data. When data is bound to the table, the column specification is used to determine how to display rows and columns. See the examples below for details of how to modify table style, add row selection and column sorting.

# Binding Data

The data table's data property is used to bind data to display. The data should be in one of the following forms:

  • An array of objects: each object will be displayed as a table row.
  • A single object: each enumerable property of the object will be displayed as a table row.

data can also be set to a Flo.w reactive expression returning an array of objects or a single object. The table will reactively respond to data changes and display the data as above.

To display the results of a Flo.w reactive query, bind the table to the results property of the reactive query. For example:

<flow-data-table data="$queries.myQuery.results">
  ...
</flow-data-table>

# Defining Table Columns

For each column required in the table add a flow-data-column child element. See Data Column for available attributes and options.

Column specification includes:

  • The data object property to use as the column cell's value.
  • The column name to display in the header.
  • Cell alignment options.
  • Cell formatting options.
  • Column fixed width.
  • Column sorting options.

# Examples

# Displaying the Results of a Flo.w Reactive Query

To display the results of a Flo.w reactive query, bind the data table to the results property of the registered query. The data table will update whenever the query is run, for example, in response to a timer update.

The example also demonstrates how to use a custom column format function to display the timestamp property of the results as a date.

# Row Selection

Add the row-select attribute to the data table component to enable row selection. The table emits selection events when a row is selected or deselected. An event is also emitted when the 'select-all' checkbox in the header row is toggled.

Events report rows using a row ID. Specify the row-id attribute on the data table to select which data property to use as the row ID. If not set, row ID will be set to the zero-based row index.

The currently selected rows can be returned with the selectedRows() method.

# Column Sorting

Add the sortable attribute to a data column element to enable sorting UI for that column. A sort indicator appears next to the column title for sortable columns when the user hovers over the column header. Clicking the sort indicator toggles between ascending and descending sort.

Note that the table provides column-sorting UI but does not perform sorting itself. To implement sorting (either in the front-end or back-end via a Flo.w reactive query), you must intercept the flowSortAction event and update the table's data accordingly. For example, if the table is bound to a Flo.w reactive query, you may set a Flo.w reactive state property in your flowSortAction event handler and reference the property in your reactive query definition. When the user modifies column sorting, the reactive property will be updated and the Flo.w reactive query will be re-run.

# Sticky Header Row

A table with a fixed height can be scrolled vertically to display all rows. Specify the sticker-header attribute to keep the header row in view.

# Compact Data Table

Specify the compact attribute to reduce the table row height.

# Fixed-Width Data Tables

A table with a fixed width can be scrolled horizontally by default to display all columns. Specify the no-scroll attribute to disabled horizontal scrolling. You may also add the wrap attribute to allow cell contents to wrap over multiple lines. Fixed-width tables are useful for sidebar detail panels and map popups.

When using fixed-width tables you may also specify individual column widths by specifying the width attribute.

# Striped Tables

Use CSS Parts to style striped tables using CSS. Odd data rows have the CSS Part row-odd applied. Even rows have the CSS Part row-even applied.

# Data-Driven Row Styling

Use CSS Parts to style specific data rows using CSS. Specify the row-type attribute to select which data property to use to add a custom CSS Part to each data row. The row part can then be used to apply per-row CSS rules.

# Column Styling

Use CSS Parts to style table columns. A CSS Part is added to each table cell in the form column-n , where n is the zero-based column index. This can be combined with other parts such as cell and header-cell to apply per-column CSS rules.

# Displaying an Object's Properties

If data is set to a single object rather than an array, the data table will display the object's properties as rows. Specify two columns with the property attributes key and value to access property keys and values.

# Properties

Property Description Type Default
compact Set to `true` to display a compact table with reduced font size and padding. boolean false
Reactive
data 		Set to bind data to the table. May be a Flo.w reactive expression, an array of data objects or a single data object. object | object[] | string
flowContext
flow-context		 The Flo.w context ID to use for application state. string 'default'
noScroll
no-scroll		 Set to `true` to disable horizontal scrolling of table data. boolean false
rowId
row-id		 Specify a data object property to use as a row ID. string
rowSelect
row-select		 Set to `true` to enable row selection. boolean false
rowType
row-type		 Specify a data object property to use as a row type. The row type can be used to style table rows based on row data. string
stickyHeader
sticky-header		 Set to `true` to keep the header row in place when scrolling the table data. boolean false
wrap Set to `true` to allow wrapping of table cell contents. boolean false

# Events

Event Description Type
flowRowSelectedAll

Emitted when all rows are selected using the row selection controls. Only applicable when `rowSelect` is enabled.

 any
flowRowSelectedNone

Emitted when all rows are deselected using the row selection controls. Only applicable when `rowSelect` is enabled.

 any
flowRowSelectionChanged

Emitted when the row selection state changes. Only applicable when `rowSelect` is enabled.

 RowSelectionChangedEventDetail
flowSortAction

Emitted when a column sort action is performed. Only applicable when sorting is enabled for a table column.

 SortActionEventDetail

# Methods

Method Description
selectedRows selectedRows() => Promise<string[]>

Returns the selected row indexes, or row IDs if `rowId` has been set.

# Slots

Slot Description
(default) Table column definitions.

# CSS Custom Properties

Name Description
--background-color The table background color (default: background).
--divider-color The table divider color (default: color-step 200).
--divider-size The table divider size (default: 1px).
--header-fill-color The header row fill color (default: background).
--header-text-color The header row text color (default: text).
--hovered-row-fill-color The hovered data row fill color (default: primary alpha 0.1).
--row-fill-color The data row fill color (default: background).
--row-text-color The data row text color (default: background).
--selected-row-fill-color The selected data row fill color (default: primary alpha 0.4).
--text-color The table text color (default: text).

# CSS Parts

Name Description
body The <tbody> element of the table.
cell Table data cell elements (<td>).
column-<n> Applied to all table cells (<th>, <td>) where `n` is zero-based column index.
header The <thead> element of the table.
header-cell Table header cell element (<th>).
header-row The table header row element (<tr>).
icon Icon elements (<flow-icon>) in icon-formatted columns.
icon-<name> Applied to Icon elements (<flow-icon>) in icon-formatted columns where `name` is the name of the icon.
row Table data row elements (<tr>).
row-<type> Applied to data table rows (<tr>) where `type` is row type.
row-even Applied to even-numbered table rows (<tr>).
row-odd Applied to odd-numbered table rows (<tr>).
table The table container element (for styling the external border).

← Data Column →