Fixed #1696 - Add tableStyle and tableClass to Table

api-generator/components/datatable.js

@@ -346,6 +346,18 @@ const DataTableProps = [
         type: "boolean",
         default: "false",
         description: "Whether to displays rows with alternating colors."
+    },
+    {
+        name: "tableStyle",
+        type: "object",
+        default: "null",
+        description: "Inline style of the table element."
+    },
+    {
+        name: "tableClass",
+        type: "string",
+        default: "null",
+        description: "Style class of the table element."
     }
 ];
 

src/components/datatable/DataTable.d.ts

@@ -61,6 +61,8 @@ interface DataTableProps {
     breakpoing?: string;
     showGridlines?: boolean;
     stripedRows?: boolean;
+    tableStyle?: object;
+    tableClass?: string;
 }
 
 interface DataTableHeaderSlotInterface {

src/components/datatable/DataTable.vue

@@ -17,7 +17,7 @@
             </template>
         </DTPaginator>
         <div class="p-datatable-wrapper" :style="{maxHeight: scrollHeight}">
-            <table ref="table" role="table" class="p-datatable-table">
+            <table ref="table" role="table" :class="[tableClass, 'p-datatable-table']" :tableStyle="tableStyle">
                 <DTTableHeader :columnGroup="headerColumnGroup" :columns="columns" :rowGroupMode="rowGroupMode"
                         :groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
                         :sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta" :filters="d_filters" :filtersStore="filters" :filterDisplay="filterDisplay"
@@ -316,6 +316,14 @@ export default {
         stripedRows: {
             type: Boolean,
             default: false
+        },
+        tableStyle: {
+            type: null,
+            default: null
+        },
+        tableClass: {
+            type: String,
+            default: null
         }
     },
     data() {

src/views/datatable/DataTableDoc.vue

@@ -2156,6 +2156,18 @@ export default {
                             <td>false</td>
                             <td>Whether to displays rows with alternating colors.</td>
                         </tr>
+                        <tr>
+                            <td>tableStyle</td>
+                            <td>object</td>
+                            <td>null</td>
+                            <td>Inline style of the table element.</td>
+                        </tr>
+                        <tr>
+                            <td>tableClass</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Style class of the table element.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>