add pageSizeOptions prop to DataGrid for customizable pagination options (#1127)

Author: anserwaseem

.changeset/seven-tools-explain.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+add pageSizeOptions prop to DataGrid for customizable pagination options

apps/kitchen-sink/src/ensemble/screens/widgets.yaml

@@ -298,6 +298,7 @@ View:
                   selectionType: '${1===10 ? "checkbox" : "radio"}'
                   allowResizableColumns: true
                   defaultSelectedRowKeys: ["2"]
+                  pageSizeOptions: [1, 5, 10, 20, 30, 40, 50]
                   styles:
                     headerStyle:
                       backgroundColor: "white"

packages/runtime/src/widgets/DataGrid/DataGrid.tsx

@@ -114,6 +114,7 @@ export type GridProps = {
   pageSize?: number;
   totalRows?: number;
   curPage?: number;
+  pageSizeOptions?: Expression<number[]>;
   virtual?: boolean;
 } & EnsembleWidgetProps<DataGridStyles>;
 
@@ -427,7 +428,7 @@ export const DataGrid: React.FC<GridProps> = (props) => {
 
   // pagination object
   const paginationObject = useMemo(() => {
-    const { hidePagination, totalRows } = values ?? {};
+    const { hidePagination, totalRows, pageSizeOptions } = values ?? {};
 
     if (hidePagination || !pageSize) {
       return false;
@@ -438,6 +439,7 @@ export const DataGrid: React.FC<GridProps> = (props) => {
       pageSize,
       total: totalRows,
       current: curPage,
+      pageSizeOptions: pageSizeOptions as number[] | undefined,
       showSizeChanger: true, // always show pagination options (otherwise it defaults to total > 50)
     };
   }, [values, pageSize, curPage, resolvedWidgetId]);