DataGrid / GridToolbar
One table for every list of data. Your server does the sorting, paging and grouping. On a phone, rows become cards.
Used in the product and order lists of Santabe.
Demo
Try it: change the price of Teh tarik to 0.
Sample data. Changes are lost when the page reloads.
What the kit already does
- Server-first. The request carries sort, cursor, limit and group. Small data that is already loaded can just go in rows.
- Edit in place, automatic rollback. The value changes at once. If the save fails, the cell goes back and its error shows in that cell.
- Validation without a form. A yup row schema and a rule per column. A value that is not valid is never sent.
- Four states built in. Loading, empty, no results, and error with a Try again button.
- Cards on a phone. Title, status, up to three main values, the rest under "More". Sort moves to an icon button.
const products: IGridDataSource<Product> = {
getRows: (request) => listProducts(request),
};
export function ProductsGrid() {
return (
<DataGrid
label="Produk"
dataSource={products}
getRowId={(product) => product.id}
columns={[
{ field: 'name', headerName: 'Produk', flex: 1 },
{
field: 'price',
headerName: 'Harga',
type: 'number',
format: NUMBER_FORMATS.idr,
editable: true,
},
]}
onCellCommit={(commit) => updatePrice(commit)}
/>
);
}getRows and onCellCommit return a Result. Errors are never thrown.
Three modes
Produk
Produk
Pesanan
Status
For the backend team
The integration guide writes out the endpoints, parameters, JSON and error codes the grid reads. For the product list:
| Method | Path | For |
|---|---|---|
GET | /seller/products | Search, filter, sort, cursor pages, total |
POST | /seller/products | Create a product from inside the row |
PATCH | /seller/products/{id} | Edit price, stock or status in the cell |
The full guide comes with kit access.