@redsift/ds-mcp-server 12.3.1-muiv6-alpha.2

package/data/demos/patterns/datagrid-page/with-loading.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { DataGrid, TextCell } from '@redsift/table';
+import { Flexbox } from '@redsift/design-system';
+import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid-pro';
+import {
+  GridToolbarContainer,
+  GridToolbarColumnsButton,
+  GridToolbarDensitySelector,
+  GridToolbarFilterButton,
+  GridToolbarExport,
+  GridToolbarQuickFilter,
+} from '@mui/x-data-grid-pro';
+
+const CustomToolbar = () => (
+  <GridToolbarContainer>
+    <Flexbox gap="0">
+      <GridToolbarFilterButton />
+      <GridToolbarColumnsButton />
+      <GridToolbarDensitySelector />
+      <GridToolbarExport />
+      <Flexbox marginLeft="8px">
+        <GridToolbarQuickFilter />
+      </Flexbox>
+    </Flexbox>
+  </GridToolbarContainer>
+);
+
+const columns: GridColDef[] = [
+  { field: 'id', headerName: 'ID', width: 100, type: 'rsString' as string },
+  {
+    field: 'label',
+    headerName: 'Label',
+    flex: 2,
+    type: 'rsString' as string,
+    renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value}</TextCell>,
+  },
+  { field: 'status', headerName: 'Status', flex: 1, type: 'rsSingleSelect' as string },
+  { field: 'score', headerName: 'Score', width: 80, type: 'rsNumber' as string },
+  { field: 'expiry', headerName: 'Expiry', width: 180, type: 'date' },
+];
+
+// -- Loading state: DataGrid with loading={true} and no rows ----------------
+
+export default () => (
+  <div style={{ width: '100%' }}>
+    <DataGrid
+      autoHeight
+      loading
+      pagination
+      paginationModel={{ page: 0, pageSize: 10 }}
+      pageSizeOptions={[10, 25, 50]}
+      rows={[]}
+      columns={columns}
+      slots={{ toolbar: CustomToolbar }}
+    />
+  </div>
+);