diff --git a/src/web/views/Components/Table/Table.vue b/src/web/views/Components/Table/Table.vue index b89b3158..62ec0612 100644 --- a/src/web/views/Components/Table/Table.vue +++ b/src/web/views/Components/Table/Table.vue @@ -177,6 +177,7 @@ return fullNameA < fullNameB ? 1 : -1; }, { id: "age", label: "Age", width: "64px", sortable: true, defaultSortOrder: "asc" }, + { id: "tags", label: "Tags", width: "200px", align: "center", filter: true }, { id: "country", label: "Country", width: "200px", align: "center", sortable: true, defaultSortOrder: "asc" } ]; @@ -331,6 +332,13 @@ export default { sortable: true, defaultSortOrder: "asc", }, + { + id: "tags", + label: "Tags", + width: "200px", + align: "center", + filter: true, + }, { id: "country", label: "Country", @@ -345,36 +353,42 @@ export default { firstName: "John", lastName: "Doe", age: 26, + tags: "Tag 4", country: "Germany", }, { firstName: "Jane", lastName: "Doe", age: 21, + tags: "Tag 2", country: "Austria", }, { firstName: "Martine", lastName: "Durand", age: 35, + tags: "Tag 1", country: "France", }, { firstName: "Giuseppe", lastName: "Bompiani", age: 64, + tags: "Tag 1", country: "Italy", }, { firstName: "Enrico", lastName: "Fermi", age: 41, + tags: "Tag 1", country: "Italy", }, { firstName: "Lev Davidovitch", lastName: "Landau", age: 23, + tags: "Tag 3", country: "Russia", }, ], diff --git a/src/web/views/Components/Table/columns-data.js b/src/web/views/Components/Table/columns-data.js index 971423b9..20bfb4ce 100644 --- a/src/web/views/Components/Table/columns-data.js +++ b/src/web/views/Components/Table/columns-data.js @@ -39,4 +39,9 @@ export default [ "Function", "Set a custom sort function for the column. If not specified, the default sort function will be used.", ], + [ + "filter", + "Boolean", + "If you want to filter the column, set this to true. Sortable by id value.", + ], ]; diff --git a/src/web/views/Components/Table/slots-data.js b/src/web/views/Components/Table/slots-data.js index 804ac7f8..9b9fe28e 100644 --- a/src/web/views/Components/Table/slots-data.js +++ b/src/web/views/Components/Table/slots-data.js @@ -16,5 +16,9 @@ export default [ [ "placeholder", "Use this slot to add a custom placeholder when the table is empty." + ], + [ + "column-filters", + "Use this slot to add custom filters for the table." ] ];