From 8f64934ae0fc61fc437c3568d276fcf52b290662 Mon Sep 17 00:00:00 2001 From: mm <25961416+mlmoravek@users.noreply.github.com> Date: Fri, 7 Jun 2024 14:06:14 +0200 Subject: [PATCH] feat(table): add `before` and `after` slot | add column `display` prop (#947) * feat(table): add `before` and `after` slot * feat(table): add column `display` prop --- packages/docs/components/Table.md | 29 ++++++++++--------- packages/oruga/src/components/table/Table.vue | 20 +++++++++++-- .../src/components/table/TableColumn.vue | 5 ++++ 3 files changed, 39 insertions(+), 15 deletions(-) diff --git a/packages/docs/components/Table.md b/packages/docs/components/Table.md index c9ed26dfc..7be4f4efc 100644 --- a/packages/docs/components/Table.md +++ b/packages/docs/components/Table.md @@ -139,19 +139,21 @@ title: Table ### Slots -| Name | Description | Bindings | -| ----------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| default | Place o-table-column here | | -| pagination | Override pagination label | **current** `number` - current page
**per-page** `number` - rows per page
**total** `number` - total rows count
**change** `(page: number): void ` - on page change event | -| top-left | Additional slot if table is paginated | | -| caption | Define a table caption here | | -| preheader | Define preheader content here | | -| check-all | Override check all checkbox | **is-all-checked** `boolean` - if all rows are checked
**is-all-uncheckable** `boolean` - if check all is uncheckable
**check-all** `(): void` - check all function | -| detail | Place row detail content here | **row** `unknown` - row content
**index** `number` - row index | -| empty | Define content if table is empty | | -| footer | Define a custom footer | **column-count** `number` - counts of visible columns
**row-count** `number` - counts of visible rows | -| loading | Override loading component | **loading** `boolean` - is loading state enabled | -| bottom-left | Additional slot if table is paginated | | +| Name | Description | Bindings | +| ----------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| default | Place o-table-column here | | +| before | Place extra `o-table-column` components here, even if you have some columns defined by prop | | +| after | Place extra `o-table-column` components here, even if you have some columns defined by prop | | +| pagination | Override pagination label | **current** `number` - current page
**per-page** `number` - rows per page
**total** `number` - total rows count
**change** `(page: number): void ` - on page change event | +| top-left | Additional slot if table is paginated | | +| caption | Define a table caption here | | +| preheader | Define preheader content here | | +| check-all | Override check all checkbox | **is-all-checked** `boolean` - if all rows are checked
**is-all-uncheckable** `boolean` - if check all is uncheckable
**check-all** `(): void` - check all function | +| detail | Place row detail content here | **row** `unknown` - row content
**index** `number` - row index | +| empty | Define content if table is empty | | +| footer | Define a custom footer | **column-count** `number` - counts of visible columns
**row-count** `number` - counts of visible rows | +| loading | Override loading component | **loading** `boolean` - is loading state enabled | +| bottom-left | Additional slot if table is paginated | | @@ -169,6 +171,7 @@ title: Table | ---------------- | ---------------------------------------------------------------- | ----------------------------------------------------- | --------------------------- | ----------------------------------------------------------- | | customSearch | Define a custom funtion for the filter search | (row: unknown, filter: string) => boolean | - | | | customSort | Define a custom sort function | (a: unknown, b: unknown, isAsc: boolean) => number | - | | +| display | Provide a display function to edit the output | (value: unknown, row: unknown) => string | - | | | field | Define an object property key if data is an object | string | - | | | headerSelectable | Make header selectable | boolean | - | false | | label | Define the column label | string | - | | diff --git a/packages/oruga/src/components/table/Table.vue b/packages/oruga/src/components/table/Table.vue index 7d71c5119..2c6107ad5 100644 --- a/packages/oruga/src/components/table/Table.vue +++ b/packages/oruga/src/components/table/Table.vue @@ -942,6 +942,12 @@ function getRowKey(row: unknown): unknown { return row; } +/** get the formated row value for a column */ +function getColumnValue(row: unknown, column: TableColumn): string { + const prop = column.field ? getValueByPath(row, column.field) : row; + return column.display ? column.display(prop, row) : String(prop); +} + // --- Filter Feature --- const filters = ref>({}); @@ -1607,15 +1613,25 @@ function tdClasses(row: unknown, column: TableColumnComponent): ClassBind[] { @slot Place o-table-column here --> + + + + + + diff --git a/packages/oruga/src/components/table/TableColumn.vue b/packages/oruga/src/components/table/TableColumn.vue index 510e9bfd8..616f16e93 100644 --- a/packages/oruga/src/components/table/TableColumn.vue +++ b/packages/oruga/src/components/table/TableColumn.vue @@ -20,6 +20,11 @@ const props = defineProps({ label: { type: String, default: undefined }, /** Define an object property key if data is an object */ field: { type: String, default: undefined }, + /** Provide a display function to edit the output */ + display: { + type: Function as PropType<(value: unknown, row: unknown) => string>, + default: undefined, + }, /** Define a column sub heading */ subheading: { type: String, default: undefined }, /** Add addtional meta information for the column for custom purpose*/