feat(table): make bordered, striped, narrowed and hoverable c…

…onfigurable (#845)
oruga-ui · Mar 9, 2024 · 6872eee · 6872eee
1 parent 4b31d5e
commit 6872eee
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/packages/oruga/src/components/table/Table.vue b/packages/oruga/src/components/table/Table.vue
@@ -63,13 +63,25 @@ const props = defineProps({
     /** Table columns */
     columns: { type: Array as PropType<Column[]>, default: () => [] },
     /** Border to all cells */
-    bordered: { type: Boolean, default: false },
+    bordered: {
+        type: Boolean,
+        default: () => getOption("table.bordered", false),
+    },
     /** Whether table is striped */
-    striped: { type: Boolean, default: false },
+    striped: {
+        type: Boolean,
+        default: () => getOption("table.striped", false),
+    },
     /** Makes the cells narrower */
-    narrowed: { type: Boolean, default: false },
+    narrowed: {
+        type: Boolean,
+        default: () => getOption("table.narrowed", false),
+    },
     /** Rows are highlighted when hovering */
-    hoverable: { type: Boolean, default: false },
+    hoverable: {
+        type: Boolean,
+        default: () => getOption("table.hoverable", false),
+    },
     /** Enable loading state */
     loading: { type: Boolean, default: false },
     /** Allow row details  */

diff --git a/packages/oruga/src/components/types.ts b/packages/oruga/src/components/types.ts
@@ -1143,6 +1143,8 @@ but will set body to position fixed, might break some layouts. */
                 paginated: boolean;
                 /** Allow chevron icon and column to be visible */
                 showDetailIcon: boolean;
+                /** Border to all cells */
+                bordered: boolean;
                 /** Class of the root element */
                 rootClass: ClassDefinition;
                 /** Class of the sortable form wrapper on mobile */
@@ -1225,6 +1227,8 @@ but will set body to position fixed, might break some layouts. */
                 detailIcon: string;
                 /** Icon pack to use */
                 iconPack: string;
+                /** Makes the cells narrower */
+                narrowed: boolean;
                 /** Mobile breakpoint as max-width value */
                 mobileBreakpoint: string;
                 /** Pagination buttons order if paginated */
@@ -1237,6 +1241,8 @@ but will set body to position fixed, might break some layouts. */
                 paginationRounded: boolean;
                 /** Rows appears as cards on mobile (collapse rows) */
                 mobileCards: boolean;
+                /** Rows are highlighted when hovering */
+                hoverable: boolean;
                 /** Sets the default sort column and order — e.g. ['first_name', 'desc'] */
                 defaultSort: string | string[];
                 /** Sets the default sort column direction on the first click */
@@ -1255,6 +1261,8 @@ but will set body to position fixed, might break some layouts. */
                 customRowKey: string;
                 /** Use a unique key of your data Object when use detailed or opened detailed. (id recommended) */
                 detailKey: string;
+                /** Whether table is striped */
+                striped: boolean;
             }>;
         tabs?: ComponentConfigBase &
             Partial<{