diff --git a/src/data-display/dynamic/dynamic-layout/mock.ts b/src/data-display/dynamic/dynamic-layout/mock.ts index a8947b938..bb77686e0 100644 --- a/src/data-display/dynamic/dynamic-layout/mock.ts +++ b/src/data-display/dynamic/dynamic-layout/mock.ts @@ -722,6 +722,10 @@ export default { data: makeTableData(), }, rawTable: { + options: { + headers: ['information', 'age', 'name', 'job'], + disable_search: false, + }, data: makeTableData(), }, querySearchTable: { diff --git a/src/data-display/dynamic/dynamic-layout/templates/html/html.stories.mdx b/src/data-display/dynamic/dynamic-layout/templates/html/html.stories.mdx index 1a0e601f8..ce68b1bf5 100644 --- a/src/data-display/dynamic/dynamic-layout/templates/html/html.stories.mdx +++ b/src/data-display/dynamic/dynamic-layout/templates/html/html.stories.mdx @@ -42,9 +42,9 @@ export const Template = (args, { argTypes }) => ({ | translation_id | O | | fields | X | | markdown | X | -| layouts | X | | search | X | | disable_search | X | +| headers | x | | layout | X | ## Supported Fetch Options diff --git a/src/data-display/dynamic/dynamic-layout/templates/item/item.stories.mdx b/src/data-display/dynamic/dynamic-layout/templates/item/item.stories.mdx index 233fb1f47..9c9eb1260 100644 --- a/src/data-display/dynamic/dynamic-layout/templates/item/item.stories.mdx +++ b/src/data-display/dynamic/dynamic-layout/templates/item/item.stories.mdx @@ -41,9 +41,9 @@ export const Template = (args, { argTypes }) => ({ | translation_id | O | | fields | X | | markdown | X | -| layouts | X | | search | X | | disable_search | X | +| headers | x | | layout | X | diff --git a/src/data-display/dynamic/dynamic-layout/templates/list/list.stories.mdx b/src/data-display/dynamic/dynamic-layout/templates/list/list.stories.mdx index e246fa70a..d8ca1f892 100644 --- a/src/data-display/dynamic/dynamic-layout/templates/list/list.stories.mdx +++ b/src/data-display/dynamic/dynamic-layout/templates/list/list.stories.mdx @@ -70,6 +70,7 @@ export const Template = (args, { argTypes }) => ({ | layouts | O | | search | X | | disable_search | X | +| headers | x | ## Supported Fetch Options diff --git a/src/data-display/dynamic/dynamic-layout/templates/markdown/markdown.stories.mdx b/src/data-display/dynamic/dynamic-layout/templates/markdown/markdown.stories.mdx index c8001a216..9218cf331 100644 --- a/src/data-display/dynamic/dynamic-layout/templates/markdown/markdown.stories.mdx +++ b/src/data-display/dynamic/dynamic-layout/templates/markdown/markdown.stories.mdx @@ -42,9 +42,9 @@ export const Template = (args, { argTypes }) => ({ | translation_id | O | | fields | X | | markdown | O | -| layouts | X | | search | X | | disable_search | X | +| headers | x | | layout | X | diff --git a/src/data-display/dynamic/dynamic-layout/templates/popup/popup.stories.mdx b/src/data-display/dynamic/dynamic-layout/templates/popup/popup.stories.mdx index 84d0def22..eb5a85d84 100644 --- a/src/data-display/dynamic/dynamic-layout/templates/popup/popup.stories.mdx +++ b/src/data-display/dynamic/dynamic-layout/templates/popup/popup.stories.mdx @@ -42,9 +42,9 @@ export const Template = (args, { argTypes }) => ({ | translation_id | O | | fields | X | | markdown | O | -| layouts | X | | search | X | | disable_search | X | +| headers | x | | layout | O | diff --git a/src/data-display/dynamic/dynamic-layout/templates/query-search-table/query-search-table.stories.mdx b/src/data-display/dynamic/dynamic-layout/templates/query-search-table/query-search-table.stories.mdx index e9e9a0924..a7bbc6c90 100644 --- a/src/data-display/dynamic/dynamic-layout/templates/query-search-table/query-search-table.stories.mdx +++ b/src/data-display/dynamic/dynamic-layout/templates/query-search-table/query-search-table.stories.mdx @@ -67,9 +67,9 @@ export const Template = (args, { argTypes }) => ({ | translation_id | O | | fields | O | | markdown | X | -| layouts | X | | search | O | | disable_search | O | +| headers | x | | layout | X | diff --git a/src/data-display/dynamic/dynamic-layout/templates/raw-table/index.vue b/src/data-display/dynamic/dynamic-layout/templates/raw-table/index.vue index 54ae30b5f..afd99bcdb 100644 --- a/src/data-display/dynamic/dynamic-layout/templates/raw-table/index.vue +++ b/src/data-display/dynamic/dynamic-layout/templates/raw-table/index.vue @@ -74,6 +74,12 @@ export default defineComponent({ fields: computed(() => { if (state.rootData[0]) { const firstItem = state.rootData[0]; + if (Array.isArray(props.options?.headers) && props.options?.headers?.length) { + return props.options.headers.map((header) => ({ + key: header, + name: header, + })); + } return sortBy(map(firstItem, (value, key) => ({ key, name: key })), (item) => item.key); } return []; diff --git a/src/data-display/dynamic/dynamic-layout/templates/raw-table/raw-table.stories.mdx b/src/data-display/dynamic/dynamic-layout/templates/raw-table/raw-table.stories.mdx index b4a0766b5..38ded738e 100644 --- a/src/data-display/dynamic/dynamic-layout/templates/raw-table/raw-table.stories.mdx +++ b/src/data-display/dynamic/dynamic-layout/templates/raw-table/raw-table.stories.mdx @@ -2,6 +2,7 @@ import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs/blocks'; import PDynamicLayout from '@/data-display/dynamic/dynamic-layout/PDynamicLayout.vue'; import {i18n} from '@/translations' import { getDynamicLayoutRawTableArgTypes } from '@/data-display/dynamic/dynamic-layout/templates/raw-table/story-helper'; +import mock from '@/data-display/dynamic/dynamic-layout/mock'; @@ -60,9 +61,9 @@ export const Template = (args, { argTypes }) => ({ | translation_id | O | | fields | X | | markdown | X | -| layouts | X | | search | X | | disable_search | O | +| headers | O | | layout | X | @@ -107,6 +108,79 @@ export const Template = (args, { argTypes }) => ({ | click-settings | X | | update-popup-visible | X | +
+
+ +## Options Example + +
+ +### Options: Disable Search + +```js +{ + disable_search: true +} +``` + + + + {{ + components: { PDynamicLayout }, + template: ` + + `, + setup() { + return { + data: mock.rawTable.data, + options: { + disable_search: true, + }, + } + } + }} + + + +### Options: Headers +"headers" option is used to specify the order of the table headers. +```js +{ + headers: ['information', 'age', 'name', 'job'] +} +``` + + + {{ + components: { PDynamicLayout }, + template: ` + + `, + setup() { + return { + data: mock.rawTable.data, + options: { + headers: ['information', 'age', 'name', 'job'] + }, + } + } + }} + + + +

diff --git a/src/data-display/dynamic/dynamic-layout/templates/raw-table/story-helper.ts b/src/data-display/dynamic/dynamic-layout/templates/raw-table/story-helper.ts index 1959c6803..54358a34a 100644 --- a/src/data-display/dynamic/dynamic-layout/templates/raw-table/story-helper.ts +++ b/src/data-display/dynamic/dynamic-layout/templates/raw-table/story-helper.ts @@ -6,6 +6,7 @@ import { getDynamicLayoutArgTypes } from '@/data-display/dynamic/dynamic-layout/ export const getDynamicLayoutRawTableArgTypes = (): ArgTypes => { const argTypes = getDynamicLayoutArgTypes(); + argTypes.options.defaultValue = mock.rawTable.options; argTypes.data.defaultValue = mock.rawTable.data; return { diff --git a/src/data-display/dynamic/dynamic-layout/templates/raw/raw.stories.mdx b/src/data-display/dynamic/dynamic-layout/templates/raw/raw.stories.mdx index e4f80a305..232a275d3 100644 --- a/src/data-display/dynamic/dynamic-layout/templates/raw/raw.stories.mdx +++ b/src/data-display/dynamic/dynamic-layout/templates/raw/raw.stories.mdx @@ -42,9 +42,9 @@ export const Template = (args, { argTypes }) => ({ | translation_id | O | | fields | X | | markdown | X | -| layouts | X | | search | X | | disable_search | X | +| headers | x | | layout | X | diff --git a/src/data-display/dynamic/dynamic-layout/templates/simple-table/simple-table.stories.mdx b/src/data-display/dynamic/dynamic-layout/templates/simple-table/simple-table.stories.mdx index c2293db4f..bff8301e0 100644 --- a/src/data-display/dynamic/dynamic-layout/templates/simple-table/simple-table.stories.mdx +++ b/src/data-display/dynamic/dynamic-layout/templates/simple-table/simple-table.stories.mdx @@ -45,9 +45,9 @@ export const Template = (args, { argTypes }) => ({ | translation_id | O | | fields | O | | markdown | X | -| layouts | X | | search | X | | disable_search | X | +| headers | x | | layout | X | diff --git a/src/data-display/dynamic/dynamic-layout/type/layout-schema.ts b/src/data-display/dynamic/dynamic-layout/type/layout-schema.ts index 3d647cb96..e57ebda6b 100644 --- a/src/data-display/dynamic/dynamic-layout/type/layout-schema.ts +++ b/src/data-display/dynamic/dynamic-layout/type/layout-schema.ts @@ -51,6 +51,7 @@ export interface SimpleTableOptions extends CommonOptions { export interface RawTableOptions extends CommonOptions { disable_search?: boolean; + headers?: string[]; } export interface TableOptions extends CommonOptions {