Merge pull request #61 from faustbrian/table-head-class

Set Table Head Class
spatie · Sep 21, 2017 · af30337 · af30337
2 parents fa8e90d + 77e7510
commit af30337
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -114,6 +114,7 @@ You can pass these props to `table-component`:
 - `cache-lifetime`: the lifetime in minutes the component will cache the filter and sorting.
 - `cache-id`: if you use multiple instances of `table-component` on the same page you must set this to a unique value per instance.
 - `table-class`: the passed value will be added to the `class` attribute of the rendered table
+- `thead-class`: the passed value will be added to the `class` attribute of the rendered table head.
 - `filter-placeholder`: the text used as a placeholder in the filter field
 - `filter-input-class`: additional classes that you will be applied to the filter text input
 - `filter-no-results`: the text displayed when the filtering returns no results
@@ -140,6 +141,7 @@ import TableComponent from 'vue-table-component';
 
 TableComponent.settings({
     tableClass: '',
+    theadClass: '',
     filterPlaceholder: 'Filter table…',
     filterNoResults: 'There are no matching rows',
 });

diff --git a/__tests__/components/table-component/TableComponent.test.js b/__tests__/components/table-component/TableComponent.test.js
@@ -284,6 +284,7 @@ describe('TableComponent', () => {
                 <table-component
                     :data="[{ firstName: 'John' },{ firstName: 'Paul' }]"
                     table-class="my-table"
+                    thead-class="my-thead"
                 >
                     <table-column
                         show="firstName"

diff --git a/__tests__/components/table-component/__snapshots__/TableComponent.test.js.snap b/__tests__/components/table-component/__snapshots__/TableComponent.test.js.snap
@@ -19,7 +19,7 @@ exports[`TableComponent accepts a function to format values 1`] = `
         >
           Table not sorted
         </caption>
-        <thead>
+        <thead class="table-component__table__head">
           <tr>
             <th role="columnheader"
                 scope="col"
@@ -79,7 +79,7 @@ exports[`TableComponent can accept a function to fetch the data 1`] = `
         >
           Table not sorted
         </caption>
-        <thead>
+        <thead class="table-component__table__head">
           <tr>
             <th role="columnheader"
                 scope="col"
@@ -133,7 +133,7 @@ exports[`TableComponent can add extra classes to the table, the cells and the he
         >
           Table not sorted
         </caption>
-        <thead>
+        <thead class="table-component__table__head my-thead">
           <tr>
             <th role="columnheader"
                 scope="col"
@@ -191,7 +191,7 @@ exports[`TableComponent can display a custom message when filtering results in n
         >
           Table not sorted
         </caption>
-        <thead>
+        <thead class="table-component__table__head">
           <tr>
             <th role="columnheader"
                 scope="col"
@@ -241,7 +241,7 @@ exports[`TableComponent can display a custom placeholder in the filter field 1`]
         >
           Table not sorted
         </caption>
-        <thead>
+        <thead class="table-component__table__head">
           <tr>
             <th role="columnheader"
                 scope="col"
@@ -287,7 +287,7 @@ exports[`TableComponent can display nested properties 1`] = `
         >
           Table not sorted
         </caption>
-        <thead>
+        <thead class="table-component__table__head">
           <tr>
             <th role="columnheader"
                 scope="col"
@@ -341,7 +341,7 @@ exports[`TableComponent can mount 1`] = `
         >
           Table not sorted
         </caption>
-        <thead>
+        <thead class="table-component__table__head">
           <tr>
             <th role="columnheader"
                 scope="col"
@@ -395,7 +395,7 @@ exports[`TableComponent can render pagination when the server responds with pagi
         >
           Table not sorted
         </caption>
-        <thead>
+        <thead class="table-component__table__head">
           <tr>
             <th role="columnheader"
                 scope="col"
@@ -472,7 +472,7 @@ exports[`TableComponent can update columns 1`] = `
         >
           Table not sorted
         </caption>
-        <thead>
+        <thead class="table-component__table__head">
           <tr>
             <th role="columnheader"
                 scope="col"
@@ -526,7 +526,7 @@ exports[`TableComponent can update columns 2`] = `
         >
           Table not sorted
         </caption>
-        <thead>
+        <thead class="table-component__table__head">
           <tr>
             <th role="columnheader"
                 scope="col"
@@ -580,7 +580,7 @@ exports[`TableComponent clicking a link in the pagination will rerender the tabl
         >
           Table not sorted
         </caption>
-        <thead>
+        <thead class="table-component__table__head">
           <tr>
             <th role="columnheader"
                 scope="col"
@@ -657,7 +657,7 @@ exports[`TableComponent clicking a link in the pagination will rerender the tabl
         >
           Table not sorted
         </caption>
-        <thead>
+        <thead class="table-component__table__head">
           <tr>
             <th role="columnheader"
                 scope="col"
@@ -729,7 +729,7 @@ exports[`TableComponent has an prop to disable the caption 1`] = `
     <div class="table-component__table-wrapper">
       <table class="table-component__table">
         <!---->
-        <thead>
+        <thead class="table-component__table__head">
           <tr>
             <th role="columnheader"
                 scope="col"
@@ -777,7 +777,7 @@ exports[`TableComponent has an prop to disable the filter 1`] = `
         >
           Table not sorted
         </caption>
-        <thead>
+        <thead class="table-component__table__head">
           <tr>
             <th role="columnheader"
                 scope="col"
@@ -831,7 +831,7 @@ exports[`TableComponent supports a scoped slot inside the table column 1`] = `
         >
           Table not sorted
         </caption>
-        <thead>
+        <thead class="table-component__table__head">
           <tr>
             <th role="columnheader"
                 scope="col"
@@ -879,7 +879,7 @@ exports[`TableComponent will use the property name as a column heading if label
         >
           Table not sorted
         </caption>
-        <thead>
+        <thead class="table-component__table__head">
           <tr>
             <th role="columnheader"
                 scope="col"
@@ -927,7 +927,7 @@ exports[`TableComponent won't use the property name as a column heading if label
         >
           Table not sorted
         </caption>
-        <thead>
+        <thead class="table-component__table__head">
           <tr>
             <th role="columnheader"
                 scope="col"

diff --git a/__tests__/components/table-component/__snapshots__/filter.test.js.snap b/__tests__/components/table-component/__snapshots__/filter.test.js.snap
@@ -20,7 +20,7 @@ exports[`Filterable tableComponent can add a custom html class on the filter inp
           >
             Table sorted by lastName (descending)
           </caption>
-          <thead>
+          <thead class="table-component__table__head">
             <tr>
               <th role="columnheader"
                   scope="col"
@@ -88,7 +88,7 @@ exports[`Filterable tableComponent can filter data 1`] = `
           >
             Table sorted by lastName (descending)
           </caption>
-          <thead>
+          <thead class="table-component__table__head">
             <tr>
               <th role="columnheader"
                   scope="col"
@@ -152,7 +152,7 @@ exports[`Filterable tableComponent can filter on another property 1`] = `
           >
             Table sorted by lastName (descending)
           </caption>
-          <thead>
+          <thead class="table-component__table__head">
             <tr>
               <th role="columnheader"
                   scope="col"
@@ -197,7 +197,7 @@ exports[`Filterable tableComponent hides the filter when no columns are filterab
           >
             Table sorted by lastName (descending)
           </caption>
-          <thead>
+          <thead class="table-component__table__head">
             <tr>
               <th role="columnheader"
                   scope="col"
@@ -265,7 +265,7 @@ exports[`Filterable tableComponent will display a message if there are no matchi
           >
             Table sorted by lastName (descending)
           </caption>
-          <thead>
+          <thead class="table-component__table__head">
             <tr>
               <th role="columnheader"
                   scope="col"
@@ -323,7 +323,7 @@ exports[`Filterable tableComponent will filter data in a case-insensitive way 1`
           >
             Table sorted by lastName (descending)
           </caption>
-          <thead>
+          <thead class="table-component__table__head">
             <tr>
               <th role="columnheader"
                   scope="col"
@@ -387,7 +387,7 @@ exports[`Filterable tableComponent will not use columns that are not filterable
           >
             Table sorted by lastName (descending)
           </caption>
-          <thead>
+          <thead class="table-component__table__head">
             <tr>
               <th role="columnheader"
                   scope="col"

diff --git a/__tests__/components/table-component/__snapshots__/sort.test.js.snap b/__tests__/components/table-component/__snapshots__/sort.test.js.snap
@@ -20,7 +20,7 @@ exports[`Sortable tableComponent can sort on another column 1`] = `
           >
             Table sorted by firstName (ascending)
           </caption>
-          <thead>
+          <thead class="table-component__table__head">
             <tr>
               <th role="columnheader"
                   scope="col"
@@ -106,7 +106,7 @@ exports[`Sortable tableComponent can sort the data with by a specific column 1`]
           >
             Table sorted by firstName (descending)
           </caption>
-          <thead>
+          <thead class="table-component__table__head">
             <tr>
               <th role="columnheader"
                   scope="col"
@@ -212,7 +212,7 @@ exports[`Sortable tableComponent can sort the data with by a specific column in
           >
             Table sorted by firstName (descending)
           </caption>
-          <thead>
+          <thead class="table-component__table__head">
             <tr>
               <th role="columnheader"
                   scope="col"
@@ -318,7 +318,7 @@ exports[`Sortable tableComponent can sort the data with by another specific colu
           >
             Table sorted by lastName (descending)
           </caption>
-          <thead>
+          <thead class="table-component__table__head">
             <tr>
               <th role="columnheader"
                   scope="col"
@@ -424,7 +424,7 @@ exports[`Sortable tableComponent it will change the sort order when clicking the
           >
             Table sorted by firstName (ascending)
           </caption>
-          <thead>
+          <thead class="table-component__table__head">
             <tr>
               <th role="columnheader"
                   scope="col"
@@ -530,7 +530,7 @@ exports[`Sortable tableComponent will not sort data when clicking a non-sortable
           >
             Table sorted by firstName (descending)
           </caption>
-          <thead>
+          <thead class="table-component__table__head">
             <tr>
               <th role="columnheader"
                   scope="col"
@@ -636,7 +636,7 @@ exports[`Sortable tableComponent will not sort on a column that is not sortable
           >
             Table sorted by songs (descending)
           </caption>
-          <thead>
+          <thead class="table-component__table__head">
             <tr>
               <th role="columnheader"
                   scope="col"
@@ -742,7 +742,7 @@ exports[`Sortable tableComponent will sort the data ascendingly if the header of
           >
             Table sorted by lastName (ascending)
           </caption>
-          <thead>
+          <thead class="table-component__table__head">
             <tr>
               <th role="columnheader"
                   scope="col"
@@ -848,7 +848,7 @@ exports[`Sortable tableComponent wont break if a sortable column has no data 1`]
           >
             Table sorted by lastName (ascending)
           </caption>
-          <thead>
+          <thead class="table-component__table__head">
             <tr>
               <th role="columnheader"
                   scope="col"

diff --git a/__tests__/settings.test.js b/__tests__/settings.test.js
@@ -5,9 +5,11 @@ describe('settings', () => {
     it('can update settings', () => {
         TableComponent.settings({
             tableClass: 'table',
+            theadClass: 'table-head'
         });
 
         expect(settings.tableClass).toBe('table');
+        expect(settings.theadClass).toBe('table-head');
         expect(settings.filterPlaceholder).toBe('Filter table…');
         expect(settings.filterNoResults).toBe('There are no matching rows');
     });

diff --git a/src/components/TableComponent.vue b/src/components/TableComponent.vue
@@ -19,7 +19,7 @@
                 <caption v-if="showCaption" class="table-component__table__caption" role="alert" aria-live="polite">
                     {{ ariaCaption }}
                 </caption>
-                <thead>
+                <thead :class="fullTableHeadClass">
                 <tr>
                     <table-column-header
                             @click="changeSorting"
@@ -86,6 +86,7 @@
             cacheLifetime: { default: 5 },
 
             tableClass: { default: settings.tableClass },
+            theadClass: { default: settings.theadClass },
             filterInputClass: { default: settings.filterInputClass },
             filterPlaceholder: { default: settings.filterPlaceholder },
             filterNoResults: { default: settings.filterNoResults },
@@ -138,6 +139,10 @@
                 return classList('table-component__table', this.tableClass);
             },
 
+            fullTableHeadClass() {
+                return classList('table-component__table__head', this.theadClass);
+            },
+
             fullFilterInputClass() {
                 return classList('table-component__filter__field', this.filterInputClass);
             },

diff --git a/src/settings.js b/src/settings.js
@@ -2,6 +2,7 @@ import merge from 'lodash/merge';
 
 const settings = {
     tableClass: '',
+    theadClass: '',
     headerClass: '',
     cellClass: '',
     filterInputClass: '',