useDataSource<T>

A hook that provides functionality for managing local data with built-in support for filtering, sorting, paging, and grouping.

tsx

interface Product {
  ProductID: number;
  ProductName: string;
  UnitPrice: number;
}

const dataSource = useDataSource<Product>({
  defaultData: products,
  defaultSort: [{ field: 'UnitPrice', dir: 'desc' }],
  defaultSkip: 0,
  take: 10,
  schema: {
    model: {
      id: 'ProductID'
    }
  }
});

return (
  <Grid
    data={dataSource.data}
    total={dataSource.total}
    {...dataSource.dataState}
    onDataStateChange={(event) => {
      dataSource.setDataState(event.dataState);
    }}
  >
    <GridColumn field="ProductID" title="ID" />
    <GridColumn field="ProductName" title="Product Name" />
  </Grid>
);

Parameters

props

DataSourceProps<T>

The configuration options for the data source.

Returns

DataSource<T>

An object containing data management methods and properties.