Fixed #4156 - DataTable & TreeTable: new size property

api-generator/components/datatable.js

@@ -366,6 +366,12 @@ const DataTableProps = [
         default: 'false',
         description: 'Whether to displays rows with alternating colors.'
     },
+    {
+        name: 'size',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the size of the table.'
+    },
     {
         name: 'tableStyle',
         type: 'object',

api-generator/components/treetable.js

@@ -222,6 +222,12 @@ const TreeTableProps = [
         default: 'null',
         description: 'Defines the responsive mode, currently only option is scroll.'
     },
+    {
+        name: 'size',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the size of the table.'
+    },
     {
         name: 'pt',
         type: 'any',

components/lib/datatable/BaseDataTable.vue

@@ -259,7 +259,9 @@ const classes = {
             'p-datatable-striped': props.stripedRows,
             'p-datatable-gridlines': props.showGridlines,
             'p-datatable-grouped-header': instance.headerColumnGroup != null,
-            'p-datatable-grouped-footer': instance.footerColumnGroup != null
+            'p-datatable-grouped-footer': instance.footerColumnGroup != null,
+            'p-datatable-sm': props.size === 'small',
+            'p-datatable-lg': props.size === 'large'
         }
     ],
     loadingOverlay: 'p-datatable-loading-overlay p-component-overlay',
@@ -709,6 +711,10 @@ export default {
             type: Boolean,
             default: false
         },
+        size: {
+            type: String,
+            default: null
+        },
         tableStyle: {
             type: null,
             default: null

components/lib/treetable/BaseTreeTable.vue

@@ -187,7 +187,9 @@ const classes = {
             'p-treetable-scrollable-horizontal': props.scrollable && props.scrollDirection === 'horizontal',
             'p-treetable-scrollable-both': props.scrollable && props.scrollDirection === 'both',
             'p-treetable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
-            'p-treetable-responsive-scroll': props.responsiveLayout === 'scroll'
+            'p-treetable-responsive-scroll': props.responsiveLayout === 'scroll',
+            'p-treetable-sm': props.size === 'small',
+            'p-treetable-lg': props.size === 'large'
         }
     ],
     loadingWrapper: 'p-treetable-loading',
@@ -416,6 +418,10 @@ export default {
             type: String,
             default: null
         },
+        size: {
+            type: String,
+            default: null
+        },
         tableProps: {
             type: Object,
             default: null

components/lib/treetable/TreeTable.d.ts

@@ -547,6 +547,10 @@ export interface TreeTableProps {
      * @defaultValue stack
      */
     responsiveLayout?: 'stack' | 'scroll' | undefined;
+    /**
+     * Defines the size of the table.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * Props to pass to the table element.
      */