diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index e7033f1c8..50799581f 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -346,6 +346,18 @@ export default { ], placeholder: "alpine", }, + { + label: "Height", + key: "height", + defaultValue: "500", + control: Input, + }, + { + label: "Pagination", + key: "pagination", + valueKey: "checked", + control: Checkbox, + }, ], }, children: [], diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index 76675ac63..846472999 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -237,7 +237,9 @@ "balham-dark", "material" ] - } + }, + "height": "number", + "pagination": "bool" } }, "dataform": { diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte index 01ed620a5..d7cc2d2e5 100644 --- a/packages/standard-components/src/DataGrid/Component.svelte +++ b/packages/standard-components/src/DataGrid/Component.svelte @@ -18,6 +18,8 @@ export let datasource = {} export let editable export let theme = 'alpine' + export let height; + export let pagination let dataLoaded = false let data @@ -32,6 +34,8 @@ }, rowSelection: editable ? "multiple" : false, suppressRowClickSelection: !editable, + paginationAutoPageSize: true, + pagination } onMount(async () => { @@ -110,7 +114,7 @@ href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" /> -
+
{#if dataLoaded} {#if editable}