feat(table): add icon/label to empty slot (#1030)

oruga-ui · Aug 7, 2024 · 79a7ab9 · 79a7ab9
1 parent bf708ee
commit 79a7ab9
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/packages/docs/components/Table.md b/packages/docs/components/Table.md
@@ -65,6 +65,9 @@ sidebarDepth: 2
 | detailedRows          | Set which rows have opened details, use `v-model:detailedRows` to make it two-way binding (if detailed).<br/>Ideal to open details via vue-router. (A unique key is required; check `rowKey` prop) | unknown[]                                                       | -                                                                               | Default function (see source code)                                                                                                                               |
 | draggable             | Allows rows to be draggable                                                                                                                                                                        | boolean                                                         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                      |
 | draggableColumn       | Allows columns to be draggable                                                                                                                                                                     | boolean                                                         | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                      |
+| emptyIcon             | Icon to be shown when the table is empty                                                                                                                                                           | string                                                          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;emptyIcon: undefined<br>}</code>             |
+| emptyIconSize         | Size of empty icon                                                                                                                                                                                 | string                                                          | `small`, `medium`, `large`                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;emptyIconSize: "large"<br>}</code>           |
+| emptyLabel            | Label to be shown when the table is empty                                                                                                                                                          | string                                                          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;emptyLabel: undefined<br>}</code>            |
 | filtersEvent          | Add a native event to filter                                                                                                                                                                       | string                                                          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>""</code>                                                                                                         |
 | filtersIcon           | Icon of the column search input                                                                                                                                                                    | string                                                          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;filterIcon: undefined<br>}</code>            |
 | filtersPlaceholder    | Placeholder of the column search input                                                                                                                                                             | string                                                          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;filterPlaceholder: undefined<br>}</code>     |

diff --git a/packages/oruga/src/components/table/Table.vue b/packages/oruga/src/components/table/Table.vue
@@ -119,8 +119,6 @@ const props = defineProps({
         type: Boolean,
         default: () => getOption("table.hoverable", false),
     },
-    /** Enable loading state */
-    loading: { type: Boolean, default: false },
     /** Set which row is selected, use `v-model:selected` to make it two-way binding (if selectable) */
     selected: { type: Object as PropType<T>, default: undefined },
     /** Table can be focused and user can select rows. Rows can be navigate with keyboard arrows and are highlighted when hovering. */
@@ -336,6 +334,26 @@ const props = defineProps({
     },
     /** Add a native event to filter */
     filtersEvent: { type: String, default: "" },
+    /** Label to be shown when the table is empty */
+    emptyLabel: {
+        type: String,
+        default: () => getOption("table.emptyLabel"),
+    },
+    /** Icon to be shown when the table is empty */
+    emptyIcon: {
+        type: String,
+        default: () => getOption("table.emptyIcon"),
+    },
+    /**
+     * Size of empty icon
+     * @values small, medium, large
+     */
+    emptyIconSize: {
+        type: String,
+        default: () => getOption("table.emptyIconSize", "large"),
+    },
+    /** Enable loading state */
+    loading: { type: Boolean, default: false },
     /** Icon for the loading state */
     loadingIcon: {
         type: String,
@@ -712,7 +730,6 @@ const emits = defineEmits<{
      * @param event {DragEvent} native drop event
      */
     (e: "drop", row: T, index: number, event: DragEvent): void;
-
     /**
      * on row dragleave event
      * @param row {T} row data
@@ -1415,7 +1432,7 @@ const tableClasses = defineClasses(
     ],
     [
         "emptyClass",
-        "o-table--table__empty",
+        "o-table--empty",
         null,
         computed(() => !visibleRows.value.length),
     ],
@@ -1970,7 +1987,14 @@ defineExpose({ rows: tableData, sort: sortByField });
                             <!--
                                 @slot Define content if table is empty
                             -->
-                            <slot name="empty" />
+                            <slot name="empty">
+                                <o-icon
+                                    v-if="emptyIcon"
+                                    :icon="emptyIcon"
+                                    :size="emptyIconSize"
+                                    both />
+                                {{ emptyLabel }}
+                            </slot>
                         </td>
                     </tr>
                 </tbody>

diff --git a/packages/oruga/src/components/table/tests/__snapshots__/table.test.ts.snap b/packages/oruga/src/components/table/tests/__snapshots__/table.test.ts.snap
@@ -17,7 +17,7 @@ exports[`OTable tests > render correctly 1`] = `
   <!--v-if-->
   <!--v-if-->
   <div class="o-table__wrapper">
-    <table class="o-table o-table--table__empty">
+    <table class="o-table o-table--empty">
       <!--v-if-->
       <!--v-if-->
       <tbody>
@@ -26,6 +26,7 @@ exports[`OTable tests > render correctly 1`] = `
             <!--
                                 @slot Define content if table is empty
                             -->
+            <!--v-if-->
           </td>
         </tr>
       </tbody>