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"
/>
@@ -138,9 +138,9 @@ export default defineComponent({
emits: ['update:dataFetchDependencies'],
setup(props, { emit }) {
// eslint-disable-next-line vue/no-setup-props-reactivity-loss
- const standardTableContext = useStandardTableContext(props.id)
+ const standardTableContext = useStandardTableContext(props.tableId)
// eslint-disable-next-line vue/no-setup-props-reactivity-loss
- const tableContext = useTableContext(props.id)
+ const tableContext = useTableContext(props.tableId)
const appliedFilters = ref([])
const searchValue = ref(null)
@@ -148,6 +148,7 @@ export default defineComponent({
const filters = computed(() => standardTableContext.value.internal.filters)
const table = computed(() => tableContext.value.internal.table.value)
const tablePagination = computed(() => table.value.getState().pagination)
+ const options = computed(() => standardTableContext.value.internal.options)
watch(
[
@@ -204,9 +205,9 @@ export default defineComponent({
),
hideTableActions: computed(
() =>
- props.options?.hideControls?.columns &&
- props.options.hideControls.filters &&
- props.options.hideControls.search,
+ options.value?.hideControls?.columns &&
+ options.value.hideControls.filters &&
+ options.value.hideControls.search,
),
inlineFilters: computed(() =>
filters.value.filter((filter) => filter.displayInline),
@@ -232,6 +233,7 @@ export default defineComponent({
onUpdateSearchValue: (value: KottiFieldText.Value) => {
searchValue.value = value
},
+ options,
pageIndex: computed(() => tablePagination.value.pageIndex),
pageSize: computed(() => tablePagination.value.pageSize),
pageSizeOptions: computed(
diff --git a/packages/kotti-ui/source/kotti-table/standard-table/context.ts b/packages/kotti-ui/source/kotti-table/standard-table/context.ts
index 94f332c2c6..0b433fd06d 100644
--- a/packages/kotti-ui/source/kotti-table/standard-table/context.ts
+++ b/packages/kotti-ui/source/kotti-table/standard-table/context.ts
@@ -16,6 +16,7 @@ export type StandardTableContext<
id: KottiStandardTable.FilterInternal['id'],
) => KottiStandardTable.FilterInternal | null
isLoading: boolean
+ options?: KottiStandardTable.Options
pageSizeOptions: number[]
paginationType: KottiStandardTable.PaginationType
}
diff --git a/packages/kotti-ui/source/kotti-table/standard-table/hooks.ts b/packages/kotti-ui/source/kotti-table/standard-table/hooks.ts
index 2d14a6a511..6e92a378c5 100644
--- a/packages/kotti-ui/source/kotti-table/standard-table/hooks.ts
+++ b/packages/kotti-ui/source/kotti-table/standard-table/hooks.ts
@@ -1,9 +1,13 @@
-import type { Ref } from 'vue'
+import type { Ref, UnwrapRef } from 'vue'
import { computed, watch } from 'vue'
+import { z } from 'zod'
-import { useKottiTable } from '../table/hooks'
+import type { KottiTableParameter } from '../table/hooks'
+import {
+ paramsSchema as KottiTableHookParamsSchema,
+ useKottiTable,
+} from '../table/hooks'
import type { AnyRow } from '../table/types'
-import type { KottiTable } from '../table/types'
import type { StandardTableContext } from './context'
import { useProvideStandardTableContext } from './context'
@@ -13,54 +17,55 @@ type KottiStandardTableParameters<
ROW extends AnyRow,
COLUMN_IDS extends string = string,
> = Ref<{
- columns: KottiTable.Column[]
- data: ROW[]
filters?: KottiStandardTable.Filter[]
id: string
isLoading?: boolean
+ options?: KottiStandardTable.Options
pagination: KottiStandardTable.Pagination
+ table: Omit<
+ UnwrapRef>,
+ 'id' | 'pagination'
+ >
}>
+const paramsSchema = z.object({
+ filters: KottiStandardTable.filterSchema.array().default(() => []),
+ id: z.string(),
+ isLoading: z.boolean().default(false),
+ options: KottiStandardTable.optionsSchema.optional(),
+ pagination: KottiStandardTable.paginationSchema,
+ table: KottiTableHookParamsSchema.omit({
+ id: true,
+ pagination: true,
+ }),
+})
+
export const useKottiStandardTable = (
- params: KottiStandardTableParameters,
+ _params: KottiStandardTableParameters,
): {
context: StandardTableContext
tableHook: ReturnType>
} => {
- const filters = computed(() =>
- KottiStandardTable.filterSchema
- .array()
- .default(() => [])
- .parse(params.value.filters),
- )
- const paginationParams = computed(() =>
- KottiStandardTable.paginationSchema.parse(params.value.pagination),
- )
+ const params = computed(() => paramsSchema.parse(_params.value))
const tableHook = useKottiTable(
computed(() => ({
- columns: params.value.columns,
- data: params.value.data,
- getRowBehavior: ({ row }: { row: ROW }) => ({
- id: String(row.id),
- }),
- hasDragAndDrop: true,
+ ..._params.value.table,
id: params.value.id,
- isSelectable: true,
pagination:
- paginationParams.value.type === KottiStandardTable.PaginationType.LOCAL
+ params.value.pagination.type === KottiStandardTable.PaginationType.LOCAL
? {
state: {
pageIndex: 0,
- pageSize: paginationParams.value.pageSize,
+ pageSize: params.value.pagination.pageSize,
},
type: KottiStandardTable.PaginationType.LOCAL,
}
: {
- rowCount: paginationParams.value.rowCount,
+ rowCount: params.value.pagination.rowCount,
state: {
pageIndex: 0,
- pageSize: paginationParams.value.pageSize,
+ pageSize: params.value.pagination.pageSize,
},
type: KottiStandardTable.PaginationType.REMOTE,
},
@@ -69,13 +74,14 @@ export const useKottiStandardTable = (
const standardTableContext: StandardTableContext = computed(() => ({
internal: {
- columns: params.value.columns,
- filters: filters.value,
+ columns: _params.value.table.columns,
+ filters: params.value.filters,
getFilter: (id) =>
- filters.value.find((filter) => filter.id === id) ?? null,
- isLoading: params.value.isLoading ?? false,
- pageSizeOptions: paginationParams.value.pageSizeOptions,
- paginationType: paginationParams.value.type,
+ params.value.filters.find((filter) => filter.id === id) ?? null,
+ isLoading: params.value.isLoading,
+ options: params.value.options,
+ pageSizeOptions: params.value.pagination.pageSizeOptions,
+ paginationType: params.value.pagination.type,
},
}))
useProvideStandardTableContext(params.value.id, standardTableContext)
diff --git a/packages/kotti-ui/source/kotti-table/standard-table/types.ts b/packages/kotti-ui/source/kotti-table/standard-table/types.ts
index 39051c1a32..d61ead8d73 100644
--- a/packages/kotti-ui/source/kotti-table/standard-table/types.ts
+++ b/packages/kotti-ui/source/kotti-table/standard-table/types.ts
@@ -168,6 +168,24 @@ export namespace KottiStandardTable {
})
export type AppliedFilter = z.output
+ export const optionsSchema = z.object({
+ hideControls: z
+ .object({
+ columns: z.boolean().default(false),
+ filters: z.boolean().default(false),
+ search: z.boolean().default(false),
+ })
+ .optional(),
+ popoversSize: z
+ .object({
+ columns: KottiPopover.propsSchema.shape.size,
+ filters: KottiPopover.propsSchema.shape.size,
+ })
+ .optional(),
+ searchPlaceholder: z.string().optional(),
+ })
+ export type Options = z.input
+
const sharedPaginationSchema = z.object({
pageIndex: z.number().int().finite().min(0),
pageSize: z.number().int().finite().gt(0),
@@ -203,25 +221,7 @@ export namespace KottiStandardTable {
export type Pagination = z.input
export const propsSchema = z.object({
- id: z.string().min(1, { message: 'Field cannot be empty' }),
- options: z
- .object({
- hideControls: z
- .object({
- columns: z.boolean().default(false),
- filters: z.boolean().default(false),
- search: z.boolean().default(false),
- })
- .optional(),
- popoversSize: z
- .object({
- columns: KottiPopover.propsSchema.shape.size,
- filters: KottiPopover.propsSchema.shape.size,
- })
- .optional(),
- searchPlaceholder: z.string().optional(),
- })
- .optional(),
+ tableId: z.string().min(1, { message: 'Field cannot be empty' }),
title: z.string().optional(),
})
export type Props = z.input
diff --git a/packages/kotti-ui/source/kotti-table/table/hooks.ts b/packages/kotti-ui/source/kotti-table/table/hooks.ts
index 81cbe50856..dc91ced0ce 100644
--- a/packages/kotti-ui/source/kotti-table/table/hooks.ts
+++ b/packages/kotti-ui/source/kotti-table/table/hooks.ts
@@ -32,7 +32,7 @@ export const EXPANSION_COLUMN_ID = 'kt-table-inner-expand'
export const SELECTION_COLUMN_ID = 'kt-table-inner-select'
export const ARRAY_START = 2
-type KottiTableParameter<
+export type KottiTableParameter<
ROW extends AnyRow,
COLUMN_IDS extends string = string,
> = Ref<{
@@ -50,7 +50,7 @@ type KottiTableParameter<
pagination?: KottiTable.Pagination
}>
-const paramsSchema = z
+export const paramsSchema = z
.object({
//TODO:
// actions : list of buttons (based on baseOptionSchema)