diff --git a/packages/documentation/pages/usage/components/standard-table.vue b/packages/documentation/pages/usage/components/standard-table.vue index 46cf4c9a3d..d194026db9 100644 --- a/packages/documentation/pages/usage/components/standard-table.vue +++ b/packages/documentation/pages/usage/components/standard-table.vue @@ -2,14 +2,13 @@
- +

@@ -254,8 +253,8 @@ export default defineComponent({ hideFilters: Kotti.FieldToggle.Value hideSearch: Kotti.FieldToggle.Value } - columnsPopoverSize: Kotti.FieldSingleSelect.Value - filtersPopoverSize: Kotti.FieldSingleSelect.Value + columnsPopoverSize: Kotti.Popover.Size + filtersPopoverSize: Kotti.Popover.Size locale: Kotti.I18n.SupportedLanguages searchPlaceholder?: Kotti.FieldText.Value showInlineFilters: Kotti.FieldToggle.Value @@ -296,6 +295,7 @@ export default defineComponent({ }, { dataTest: 'single-select-filter', + displayInline: settings.value.showInlineFilters ?? false, id: 'singleSelectFilter', isUnsorted: true, label: 'Single select filter', @@ -362,61 +362,45 @@ export default defineComponent({ type: Kotti.StandardTable.FilterType.NUMBER_RANGE, unit: 'Kg', }, - ...(settings.value.showInlineFilters - ? [ - { - dataTest: 'single-select-filter-inline', - displayInline: true, - id: 'singleSelectFilterInline', - isUnsorted: true, - label: 'Single select filter Inline', - options: [ - { - dataTest: 'opt-1', - isDisabled: false, - label: 'Option 1', - value: 101, - }, - { - dataTest: 'opt-2', - isDisabled: false, - label: 'Option 2', - value: 102, - }, - { - dataTest: 'opt-3', - isDisabled: false, - label: 'Option 3', - value: 103, - }, - ], - type: Kotti.StandardTable.FilterType.SINGLE_SELECT, - }, - ] - : []), ]) useKottiStandardTable( computed(() => ({ - columns: todosColumns.value, - data: todosData.value, id: 'example-local-data', pagination: { pageSize: 5, // eslint-disable-next-line no-magic-numbers - pageSizeOptions: [5, 10, 15, 20], + pageSizeOptions: [5, 10, 15, 30, 50, 100], + rowCount: recipesRowCount.value, type: Kotti.StandardTable.PaginationType.LOCAL, }, + table: { + columns: todosColumns.value, + data: todosData.value, + getRowBehavior: ({ row }: { row: TodoRow }) => ({ + id: String(row.id), + }), + }, })), ) useKottiStandardTable( computed(() => ({ - columns: recipesColumns.value, - data: recipesData.value, filters: filters.value, id: 'example-remote-data', isLoading: isLoadingRecipes.value, + options: { + hideControls: { + columns: settings.value.booleanFlags.hideColumns ?? undefined, + filters: settings.value.booleanFlags.hideFilters ?? undefined, + search: settings.value.booleanFlags.hideSearch ?? undefined, + }, + popoversSize: { + columns: settings.value.columnsPopoverSize, + filters: settings.value.filtersPopoverSize, + }, + searchPlaceholder: settings.value.searchPlaceholder ?? undefined, + }, pagination: { pageSize: 5, // eslint-disable-next-line no-magic-numbers @@ -424,6 +408,13 @@ export default defineComponent({ rowCount: recipesRowCount.value, type: Kotti.StandardTable.PaginationType.REMOTE, }, + table: { + columns: recipesColumns.value, + data: recipesData.value, + getRowBehavior: ({ row }: { row: RecipeRow }) => ({ + id: String(row.id), + }), + }, })), ) @@ -468,19 +459,6 @@ export default defineComponent({ throw error } }, - isLoadingRecipes, - options: computed(() => ({ - hideControls: { - columns: settings.value.booleanFlags.hideColumns, - filters: settings.value.booleanFlags.hideFilters, - search: settings.value.booleanFlags.hideSearch, - }, - popoversSize: { - columns: settings.value.columnsPopoverSize, - filters: settings.value.filtersPopoverSize, - }, - searchPlaceholder: settings.value.searchPlaceholder, - })), settings, sizeOptions: computed((): Kotti.FieldSingleSelect.Props['options'] => Object.entries(Kotti.Popover.Size).map(([key, value]) => ({ diff --git a/packages/kotti-ui/source/kotti-table/KtStandardTable.vue b/packages/kotti-ui/source/kotti-table/KtStandardTable.vue index 7393d2d9a5..211c3b8c3d 100644 --- a/packages/kotti-ui/source/kotti-table/KtStandardTable.vue +++ b/packages/kotti-ui/source/kotti-table/KtStandardTable.vue @@ -82,7 +82,7 @@ v-else class="kt-standard-table__table" :isLoading="isLoading" - :tableId="id" + :tableId="tableId" />