diff --git a/.changeset/seven-tools-explain.md b/.changeset/seven-tools-explain.md new file mode 100644 index 000000000..f048b1ef0 --- /dev/null +++ b/.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 diff --git a/apps/kitchen-sink/src/ensemble/screens/widgets.yaml b/apps/kitchen-sink/src/ensemble/screens/widgets.yaml index 3e803c856..782a14d35 100644 --- a/apps/kitchen-sink/src/ensemble/screens/widgets.yaml +++ b/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" diff --git a/packages/runtime/src/widgets/DataGrid/DataGrid.tsx b/packages/runtime/src/widgets/DataGrid/DataGrid.tsx index ce90bc336..85b0b74b4 100644 --- a/packages/runtime/src/widgets/DataGrid/DataGrid.tsx +++ b/packages/runtime/src/widgets/DataGrid/DataGrid.tsx @@ -114,6 +114,7 @@ export type GridProps = { pageSize?: number; totalRows?: number; curPage?: number; + pageSizeOptions?: Expression; virtual?: boolean; } & EnsembleWidgetProps; @@ -427,7 +428,7 @@ export const DataGrid: React.FC = (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 = (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]);