Skip to content

Commit

Permalink
feat(table): add before and after slot | add column display prop (
Browse files Browse the repository at this point in the history 
#947)

* feat(table): add `before` and `after` slot

* feat(table): add column `display` prop
  • Loading branch information
@mlmoravek
mlmoravek authored Jun 7, 2024
1 parent a1b7d45 commit 8f64934
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 15 deletions.
29 changes: 16 additions & 13 deletions packages/docs/components/Table.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,19 +139,21 @@ title: Table

### Slots

| Name | Description | Bindings |
| ----------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| default | Place o-table-column here | |
| pagination | Override pagination label | **current** `number` - current page<br/>**per-page** `number` - rows per page<br/>**total** `number` - total rows count<br/>**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<br/>**is-all-uncheckable** `boolean` - if check all is uncheckable<br/>**check-all** `(): void` - check all function |
| detail | Place row detail content here | **row** `unknown` - row content<br/>**index** `number` - row index |
| empty | Define content if table is empty | |
| footer | Define a custom footer | **column-count** `number` - counts of visible columns<br/>**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<br/>**per-page** `number` - rows per page<br/>**total** `number` - total rows count<br/>**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<br/>**is-all-uncheckable** `boolean` - if check all is uncheckable<br/>**check-all** `(): void` - check all function |
| detail | Place row detail content here | **row** `unknown` - row content<br/>**index** `number` - row index |
| empty | Define content if table is empty | |
| footer | Define a custom footer | **column-count** `number` - counts of visible columns<br/>**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 | |

</div>

Expand All @@ -169,6 +171,7 @@ title: Table
| ---------------- | ---------------------------------------------------------------- | ----------------------------------------------------- | --------------------------- | ----------------------------------------------------------- |
| customSearch | Define a custom funtion for the filter search | (row: unknown, filter: string) =&gt; boolean | - | |
| customSort | Define a custom sort function | (a: unknown, b: unknown, isAsc: boolean) =&gt; number | - | |
| display | Provide a display function to edit the output | (value: unknown, row: unknown) =&gt; string | - | |
| field | Define an object property key if data is an object | string | - | |
| headerSelectable | Make header selectable | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| label | Define the column label | string | - | |
Expand Down
20 changes: 18 additions & 2 deletions packages/oruga/src/components/table/Table.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<Record<string, string>>({});
Expand Down Expand Up @@ -1607,15 +1613,25 @@ function tdClasses(row: unknown, column: TableColumnComponent): ClassBind[] {
@slot Place o-table-column here
-->
<slot>
<!--
@slot Place extra `o-table-column` components here, even if you have some columns defined by prop
-->
<slot name="before" />

<template v-if="columns?.length">
<o-table-column
v-for="(column, idx) in columns"
:key="idx"
:key="column.field || idx"
v-slot="{ row }"
v-bind="column">
{{ column.field ? row[column.field] : row }}
{{ getColumnValue(row, column as TableColumn) }}
</o-table-column>
</template>
<!--
@slot Place extra `o-table-column` components here, even if you have some columns defined by prop
-->
<slot name="after" />
</slot>
</div>
Expand Down
5 changes: 5 additions & 0 deletions packages/oruga/src/components/table/TableColumn.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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*/
Expand Down

0 comments on commit 8f64934

Please sign in to comment.