feat(VDataTable): add cellClass property to headers (#11775)

vuetifyjs · Oct 6, 2020 · 8d06d45 · 8d06d45
1 parent bf78f62
commit 8d06d45
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 4 deletions.
diff --git a/packages/api-generator/src/maps/v-data-table.js b/packages/api-generator/src/maps/v-data-table.js
@@ -12,6 +12,7 @@ const TableHeader = {
   'groupable?': 'boolean',
   'divider?': 'boolean',
   'class?': 'string | string[]',
+  'cellClass?': 'string | string[]',
   'width?': 'string | number',
   'filter?': '(value: any, search: string, item: any) => boolean',
   'sort?': '(a: any, b: any) => number',

diff --git a/packages/vuetify/src/components/VDataTable/Row.ts b/packages/vuetify/src/components/VDataTable/Row.ts
@@ -38,10 +38,13 @@ export default Vue.extend({
       const textAlign = `text-${header.align || 'start'}`
 
       return h('td', {
-        class: {
-          [textAlign]: true,
-          'v-data-table__divider': header.divider,
-        },
+        class: [
+          textAlign,
+          header.cellClass,
+          {
+            'v-data-table__divider': header.divider,
+          },
+        ],
       }, children)
     })
 

diff --git a/packages/vuetify/src/components/VDataTable/__tests__/Row.spec.ts b/packages/vuetify/src/components/VDataTable/__tests__/Row.spec.ts
@@ -64,6 +64,29 @@ describe('Table Row', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
+  it('should render with cellClass', () => {
+    const wrapper = mountFunction({
+      context: {
+        props: {
+          headers: [
+            { text: 'Petrol', value: 'petrol', cellClass: 'a' },
+            { text: 'Diesel', value: 'diesel', cellClass: ['b', 'c'] },
+          ],
+          item: {
+            petrol: 0.68,
+            diesel: 0.65,
+          },
+        },
+      },
+    })
+
+    const tds = wrapper.findAll('td')
+    expect(tds.at(0).classes()).toContain('a')
+    expect(tds.at(1).classes()).toContain('b')
+    expect(tds.at(1).classes()).toContain('c')
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
   it.skip('should render with regular slots', () => {
     const wrapper = mountFunction({
       context: {

diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/Row.spec.ts.snap b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/Row.spec.ts.snap
@@ -24,6 +24,17 @@ exports[`Table Row should render non-string values 1`] = `
 </tr>
 `;
 
+exports[`Table Row should render with cellClass 1`] = `
+<tr>
+  <td class="text-start a">
+    0.68
+  </td>
+  <td class="text-start b c">
+    0.65
+  </td>
+</tr>
+`;
+
 exports[`Table Row should render without slots 1`] = `
 <tr>
   <td class="text-start">

diff --git a/packages/vuetify/types/index.d.ts b/packages/vuetify/types/index.d.ts
@@ -273,6 +273,7 @@ export interface DataTableHeader<T extends any = any> {
   groupable?: boolean
   divider?: boolean
   class?: string | string[]
+  cellClass?: string | string[]
   width?: string | number
   filter?: (value: any, search: string | null, item: any) => boolean
   sort?: DataTableCompareFunction<T>