Vivid Logo Vivid

Data Grid

Allows users to interact with data in a tabular format.

Default Configuration

Use the Data Grid Row and Data Grid Cell sub-components inside of Data Grid's default slot to construct the tabular data like you would using tr and td tags inside of a table element.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-data-grid>
	<vwc-data-grid-row>
		<vwc-data-grid-cell>Data 11</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 12</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 13</vwc-data-grid-cell>
	</vwc-data-grid-row>
	<vwc-data-grid-row>
		<vwc-data-grid-cell>Data 21</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 22</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 23</vwc-data-grid-cell>
	</vwc-data-grid-row>
</vwc-data-grid>

Content can also be passed to the Data Grid programically using the rowsData property.

Grid Header

A grid header can be provided by setting:

  • row-type attribute on Data Grid Row to header or sticky-header (for a header that stick to the top while the body is scrollable)
  • cell-type on Data Grid Cells to columnheader
<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-select
	label="Grid header row-type"
	onchange="changeHeader()"
	class="select"
>
	<vwc-option value="header" text="header" selected></vwc-option>
	<vwc-option value="sticky-header" text="sticky-header"></vwc-option>
</vwc-select>

<vwc-data-grid class="data-grid">
	<vwc-data-grid-row row-type="header">
		<vwc-data-grid-cell cell-type="columnheader">Data 1</vwc-data-grid-cell>
		<vwc-data-grid-cell cell-type="columnheader">Data 2</vwc-data-grid-cell>
		<vwc-data-grid-cell cell-type="columnheader">Data 3</vwc-data-grid-cell>
	</vwc-data-grid-row>
	<vwc-data-grid-row>
		<vwc-data-grid-cell>Data 11</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 12</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 13</vwc-data-grid-cell>
	</vwc-data-grid-row>
	<vwc-data-grid-row>
		<vwc-data-grid-cell>Data 21</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 22</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 23</vwc-data-grid-cell>
	</vwc-data-grid-row>
	<vwc-data-grid-row>
		<vwc-data-grid-cell>Data 31</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 32</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 33</vwc-data-grid-cell>
	</vwc-data-grid-row>
	<vwc-data-grid-row>
		<vwc-data-grid-cell>Data 41</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 42</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 43</vwc-data-grid-cell>
	</vwc-data-grid-row>
	<vwc-data-grid-row>
		<vwc-data-grid-cell>Data 51</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 52</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 53</vwc-data-grid-cell>
	</vwc-data-grid-row>
	<vwc-data-grid-row>
		<vwc-data-grid-cell>Data 61</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 62</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 63</vwc-data-grid-cell>
	</vwc-data-grid-row>
</vwc-data-grid>

<script>
	const gridHeader = document.querySelector('.data-grid > [row-type]');
	function changeHeader() {
		headerType = event.currentTarget.value;
		gridHeader.setAttribute('row-type', headerType);
	}
</script>

<style>
	.data-grid {
		max-block-size: 300px;
	}

	.select {
		inline-size: 160px;
	}
</style>

Setting Column Widths

Use the grid-template-columns attribute to set the width of the grid columns.

Values match the CSS grid-template-columns property.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-data-grid grid-template-columns="15% 25% 60%" class="data-grid">
	<vwc-data-grid-row row-type="header">
		<vwc-data-grid-cell cell-type="columnheader">Data 1</vwc-data-grid-cell>
		<vwc-data-grid-cell cell-type="columnheader">Data 2</vwc-data-grid-cell>
		<vwc-data-grid-cell cell-type="columnheader">Data 3</vwc-data-grid-cell>
	</vwc-data-grid-row>
	<vwc-data-grid-row>
		<vwc-data-grid-cell>Data 11</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 12</vwc-data-grid-cell>
		<vwc-data-grid-cell
			>Data 13 with more content to display</vwc-data-grid-cell
		>
	</vwc-data-grid-row>
	<vwc-data-grid-row>
		<vwc-data-grid-cell>Data 21</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 22</vwc-data-grid-cell>
		<vwc-data-grid-cell
			>Data 23 with more content to display</vwc-data-grid-cell
		>
	</vwc-data-grid-row>
</vwc-data-grid>

Selection Mode

Use the selection-mode attribute to specify the how cells or rows can be selected.

  • none (default) - cells or row can not be selected
  • single-cell - one cell can be selected
  • multi-cell - multiple cells can be selected by holding the SHIFT key
  • single-row - one row can be selected
  • multi-row - multiple rows can be selected by holding the SHIFT key
<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-select onchange="changeSelectionMode()">
	<vwc-option value="none" text="none"></vwc-option>
	<vwc-option value="single-cell" text="single-cell"></vwc-option>
	<vwc-option value="multi-cell" text="multi-cell"></vwc-option>
	<vwc-option value="single-row" text="single-row"></vwc-option>
	<vwc-option value="multi-row" text="multi-row"></vwc-option>
</vwc-select>

<vwc-data-grid class="data-grid">
	<vwc-data-grid-row row-type="header">
		<vwc-data-grid-cell cell-type="columnheader">Data 1</vwc-data-grid-cell>
		<vwc-data-grid-cell cell-type="columnheader">Data 2</vwc-data-grid-cell>
		<vwc-data-grid-cell cell-type="columnheader">Data 3</vwc-data-grid-cell>
	</vwc-data-grid-row>
	<vwc-data-grid-row>
		<vwc-data-grid-cell>Data 11</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 12</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 13</vwc-data-grid-cell>
	</vwc-data-grid-row>
	<vwc-data-grid-row>
		<vwc-data-grid-cell>Data 21</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 22</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 23</vwc-data-grid-cell>
	</vwc-data-grid-row>
	<vwc-data-grid-row>
		<vwc-data-grid-cell>Data 31</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 32</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 33</vwc-data-grid-cell>
	</vwc-data-grid-row>
	<vwc-data-grid-row>
		<vwc-data-grid-cell>Data 41</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 42</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 43</vwc-data-grid-cell>
	</vwc-data-grid-row>
</vwc-data-grid>

<script>
	const grid = document.querySelector('.data-grid');

	function changeSelectionMode() {
		selectionMode = event.currentTarget.value;
		grid.selectionMode = selectionMode;
	}
</script>

Pre-Selecting Rows or Cells

Use the aria-selected attribute to indicate that the selected state of the row or cell.

For selection functionality to work correctly, the selection-mode attribute (on Data Grid) must be set to the relevant value.

 
<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-data-grid selection-mode="single-row">
	<vwc-data-grid-row class="header" row-type="header">
		<vwc-data-grid-cell cell-type="columnheader"> Data 1 </vwc-data-grid-cell>
		<vwc-data-grid-cell cell-type="columnheader">Data 2</vwc-data-grid-cell>
	</vwc-data-grid-row>
	<vwc-data-grid-row aria-selected="true">
		<vwc-data-grid-cell>Data 11</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 12</vwc-data-grid-cell>
	</vwc-data-grid-row>
	<vwc-data-grid-row>
		<vwc-data-grid-cell>Data 21</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 22</vwc-data-grid-cell>
	</vwc-data-grid-row>
</vwc-data-grid>
<vwc-data-grid selection-mode="single-cell">
	<vwc-data-grid-row class="header" row-type="header">
		<vwc-data-grid-cell cell-type="columnheader"> Data 1 </vwc-data-grid-cell>
		<vwc-data-grid-cell cell-type="columnheader">Data 2</vwc-data-grid-cell>
	</vwc-data-grid-row>
	<vwc-data-grid-row>
		<vwc-data-grid-cell aria-selected="true">Data 11</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 12</vwc-data-grid-cell>
	</vwc-data-grid-row>
	<vwc-data-grid-row>
		<vwc-data-grid-cell>Data 21</vwc-data-grid-cell>
		<vwc-data-grid-cell>Data 22</vwc-data-grid-cell>
	</vwc-data-grid-row>
</vwc-data-grid>

Indicate Sort State

Use the aria-sort attribute on a columnheader cell to indicate the sortable state of a header cell. This will add the right chevron(s) according to the state.

  • ascending - Items are sorted in ascending order by this column. Will show one chevron pointing up.
  • descending - Items are sorted in descending order by this column. Will show one chevron pointing down.
  • none - There is no defined sort applied to the column. Will show indeterminate state with the two chevrons.
  • other - A sorting algorithm other than ascending or descending has been applied. Will show no hint.

For more information regarding aria-sort you can reference the W3C spec.

The sortable feature doesn't actually sort the data, it only changes the visual representation of the column header. See the sorting use case for more information.

 
<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-data-grid>
	<vwc-data-grid-row role="row">
		<vwc-data-grid-cell cell-type="columnheader" aria-sort="ascending"
			>Ascending</vwc-data-grid-cell
		>
		<vwc-data-grid-cell cell-type="columnheader" aria-sort="descending"
			>Descending</vwc-data-grid-cell
		>
		<vwc-data-grid-cell cell-type="columnheader" aria-sort="none"
			>None</vwc-data-grid-cell
		>
		<vwc-data-grid-cell cell-type="columnheader" aria-sort="other"
			>Other</vwc-data-grid-cell
		>
	</vwc-data-grid-row>
</vwc-data-grid>