feat(VDataTable): Add option to hide an entire column

vuetifyjs · Jul 26, 2024 · 1bfecea · 1bfecea
1 parent 3024bb1
commit 1bfecea
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 0 deletions.
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass
@@ -52,6 +52,9 @@
                 & .v-data-table-header__content
                   display: contents
 
+              &.v-data-table-column--hidden
+                display: none
+
             > th
               align-items: center
 

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx b/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx
@@ -18,6 +18,7 @@ export const VDataTableColumn = defineFunctionalComponent({
   width: [Number, String],
   maxWidth: [Number, String],
   nowrap: Boolean,
+  hidden: Boolean,
 }, (props, { slots }) => {
   const Tag = props.tag ?? 'td'
   return (
@@ -29,6 +30,7 @@ export const VDataTableColumn = defineFunctionalComponent({
           'v-data-table-column--last-fixed': props.lastFixed,
           'v-data-table-column--no-padding': props.noPadding,
           'v-data-table-column--nowrap': props.nowrap,
+          'v-data-table-column--hidden': props.hidden,
         },
         `v-data-table-column--align-${props.align}`,
       ]}

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
@@ -160,6 +160,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
           onClick={ column.sortable ? () => toggleSort(column) : undefined }
           fixed={ column.fixed }
           nowrap={ column.nowrap }
+          hidden={ column.hidden }
           lastFixed={ column.lastFixed }
           noPadding={ noPadding }
           { ...headerProps }

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx
@@ -130,6 +130,7 @@ export const VDataTableRow = genericComponent<new <T>(
               maxWidth={ !mobile.value ? column.maxWidth : undefined }
               noPadding={ column.key === 'data-table-select' || column.key === 'data-table-expand' }
               nowrap={ column.nowrap }
+              hidden={ column.hidden }
               width={ !mobile.value ? column.width : undefined }
               { ...cellProps }
               { ...columnCellProps }

diff --git a/packages/vuetify/src/components/VDataTable/types.ts b/packages/vuetify/src/components/VDataTable/types.ts
@@ -19,6 +19,7 @@ export type DataTableHeader<T = Record<string, any>> = {
   minWidth?: string
   maxWidth?: string
   nowrap?: boolean
+  hidden?: boolean
 
   headerProps?: Record<string, any>
   cellProps?: HeaderCellProps