New to KendoReact? Start a free 30-day trial

useDataSource

Hook

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

Definition

Package:@progress/kendo-react-data-tools

Syntax:

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>
);