DataGrid / GridToolbar
Satu tabel untuk semua daftar data. Sort, paging, dan grup dikerjakan server kamu. Di HP, baris jadi kartu.
Dipakai di daftar produk dan pesanan Santabe.
Demo
Coba: ganti harga Teh tarik jadi 0.
Contoh data. Perubahan hilang saat halaman dimuat ulang.
Yang sudah dikerjakan kit
- Server-first. Request membawa sort, cursor, limit, dan grup. Data kecil yang sudah dimuat cukup lewat rows.
- Edit langsung, rollback otomatis. Nilai berubah seketika. Kalau save gagal, sel kembali dan error-nya tampil di sel itu.
- Validasi tanpa form. Skema yup baris dan aturan per kolom. Nilai yang tidak valid tidak pernah dikirim.
- Empat keadaan bawaan. Memuat, kosong, tidak ada hasil, dan error dengan tombol Coba lagi.
- Di HP jadi kartu. Judul, status, sampai tiga nilai utama, detail di "Lainnya". Sort pindah ke tombol ikon.
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 dan onCellCommit mengembalikan Result. Error tidak pernah dilempar.
Tiga mode
Produk
Produk
Pesanan
Status
Untuk tim backend
Panduan integrasi menuliskan endpoint, parameter, JSON, dan kode error yang dibaca grid. Contohnya untuk daftar produk:
| Method | Path | Untuk |
|---|---|---|
GET | /seller/products | Cari, filter, sort, halaman cursor, total |
POST | /seller/products | Tambah produk dari dalam baris |
PATCH | /seller/products/{id} | Edit harga, stok, atau status di sel |
Panduan lengkap dikirim bersama akses kit.