feat(table): allow rendering custom header via dynamic header slot

closes jd-solanki#84
therealokoro · Dec 16, 2022 · c7c084e · c7c084e
1 parent ba48a69
commit c7c084e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 23 deletions.
diff --git a/docs/demos/table/DemoTableColumnSlot.vue → docs/demos/table/DemoTableSlots.vue b/docs/demos/table/DemoTableColumnSlot.vue → docs/demos/table/DemoTableSlots.vue
@@ -31,19 +31,17 @@ const rows = [
 <template>
   <div class="cards-demo-container">
     <ATable :rows="rows">
-      <!-- Name -->
-      <template #col-name="{ row }">
-        <span class="text-primary">
-          {{ row.name }}
-        </span>
+      <!-- Header: Name -->
+      <template #header-name="{ col }">
+        <i class="i-bx-user me-1" /> {{ col.name }}
       </template>
 
-      <!-- Website -->
-      <template #col-website="{ row }">
-        <div class="flex gap-1 items-center">
-          <div class="i-bx-globe" />
-          {{ row.website }}
-        </div>
+      <!-- Column: Name -->
+      <template #col-name="{ row }">
+        <a
+          :href="row.website"
+          class="text-primary hover:underline"
+        >{{ row.name }}</a>
       </template>
     </ATable>
   </div>

diff --git a/docs/guide/components/table.md b/docs/guide/components/table.md
@@ -37,13 +37,15 @@ Use `formatter` property while defining column to format the column text.
 
 ::::
 
-<!-- 👉 Column Slot -->
-::::card Column Slot
+<!-- 👉 Slots -->
+::::card Slots
 
-`ATable` generates scoped slot based on your column name. If your column name is `website` then you can use `col-website` scoped slot to render custom content in your column.
+`ATable` provides scoped slot for rendering customer header for your column instead of just text via `header-<colName>` slot.
 
-:::code DemoTableColumnSlot
-<<< @/demos/table/DemoTableColumnSlot.vue{35-39,42-47}
+It also generates scoped slot based on your column name for rendering custom column. If your column name is `website` then you can use `col-website` scoped slot to render custom content in your column.
+
+:::code DemoTableSlots
+<<< @/demos/table/DemoTableSlots.vue{35-39,42-47}
 :::
 
 ::::

diff --git a/packages/anu-vue/src/components/table/ATable.tsx b/packages/anu-vue/src/components/table/ATable.tsx
@@ -376,25 +376,29 @@ export const ATable = defineComponent({
           {/* 👉 thead */}
           <thead>
             <tr>
-              {_columns.value.map(column =>
+              {_columns.value.map(col =>
                 <th
                   class={[
                     'a-table-table-th whitespace-nowrap',
                     props.isSortable && 'cursor-pointer select-none',
                   ]}
-                  onClick={() => handleHeaderClick(column)}
+                  onClick={() => handleHeaderClick(col)}
                 >
                   <div class="inline-flex items-center">
-                    <span>
-                      {column.name}
-                    </span>
+                    {
+                      slots[`header-${col.name}`]
+                        ? slots[`header-${col.name}`]?.({ col })
+                        : <span>
+                          {col.name}
+                        </span>
+                    }
                     <div
                       class="i-bx-up-arrow-alt"
-                      v-show={getShallSortByAsc.value(column) === true}
+                      v-show={getShallSortByAsc.value(col) === true}
                     />
                     <div
                       class="i-bx-down-arrow-alt"
-                      v-show={getShallSortByAsc.value(column) === false}
+                      v-show={getShallSortByAsc.value(col) === false}
                     />
                   </div>
                 </th>,