DataGrid

The DataGrid component displays data in a tabular format with features like sorting, filtering, and selection.

Import

<script>
  import { DataGrid, DataGridRow, DataGridCell } from 'svelte-fluentui';
</script>
svelte

Basic Usage

<DataGrid>
  <DataGridRow>
    <DataGridCell>Name</DataGridCell>
    <DataGridCell>Age</DataGridCell>
    <DataGridCell>City</DataGridCell>
  </DataGridRow>
  <DataGridRow>
    <DataGridCell>John Doe</DataGridCell>
    <DataGridCell>30</DataGridCell>
    <DataGridCell>New York</DataGridCell>
  </DataGridRow>
</DataGrid>
svelte

With Column Headers

<DataGrid>
  <DataGridRow header>
    <DataGridCell>Product</DataGridCell>
    <DataGridCell>Price</DataGridCell>
    <DataGridCell>Stock</DataGridCell>
  </DataGridRow>
  <!-- Data rows... -->
</DataGrid>
svelte

Properties

PropertyTypeDefaultDescription
selectablebooleanfalseEnable row selection
sortablebooleanfalseEnable column sorting
filterablebooleanfalseEnable filtering

Events

EventDescription
on:rowselectFired when a row is selected
on:sortFired when column sorting changes
Last update at: Invalid Date