Adding heading Attrs to Column

src/App.vue

@@ -228,7 +228,18 @@ const updateField = (index: number, field: keyof DataType, value: any) => {
         @update-field="updateField"
       >
         <Column checkbox fixed width="35"></Column>
-        <Column header="Id" prop="id" :hidden="!hides.includes('id')" fixed width="100" sortable editable></Column>
+
+        <Column
+          :cell-attrs="(r, c) => ({ 'data-label': c.header })"
+          header="Id"
+          prop="id"
+          :hidden="!hides.includes('id')"
+          fixed
+          width="100"
+          sortable
+          editable
+        >
+        </Column>
         <Column header="Num" prop="num" fixed width="100" sortable editable></Column>
         <Column
           :header="header"
@@ -238,13 +249,8 @@ const updateField = (index: number, field: keyof DataType, value: any) => {
           width="100"
           :col-attrs="createDynamicAttrs"
         ></Column>
-        <Column
-          header="Last Name"
-          :hidden="!hides.includes('lastName')"
-          sortable
-          :order="Number(switched)"
-          width="100"
-        ></Column>
+        <Column header="Last Name" :hidden="!hides.includes('lastName')" sortable :order="Number(switched)" width="100">
+        </Column>
         <Column
           header="Age"
           sortable

src/components/Table/Cell.vue

@@ -1,5 +1,5 @@
 <template>
-  <td ref="tdRef" :class="col.class">
+  <td ref="tdRef" :class="col.class" v-bind="col.cellAttrs?.(props.row, props.col)">
     <CellSlot v-if="col.slots.default" />
     <label v-else-if="col.checkbox" class="fuzzy-ui-table-cell-checkbox">
       <input

src/components/Table/Column.vue

@@ -55,6 +55,12 @@ export default defineComponent({
     colAttrs: {
       type: Function as PropType<ColConfig['colAttrs']>,
     },
+    cellAttrs: {
+      type: Object as PropType<ColConfig['cellAttrs']>,
+    },
+    headerAttrs: {
+      type: Object as PropType<ColConfig['headerAttrs']>,
+    },
     format: {
       type: Function as PropType<ColConfig['format']>,
       default: (s: unknown) => s,

src/components/Table/HRow.vue

@@ -1,6 +1,6 @@
 <template>
   <tr>
-    <th v-for="[key, col] in columns" :key="col.key + 'th'">
+    <th v-for="[key, col] in columns" :key="col.key + 'th'" v-bind="col.headerAttrs">
       <HCell :col="col" @sort="sort(key, col)" />
     </th>
   </tr>

src/components/Table/types.ts

@@ -12,17 +12,19 @@ export type Data = Row[]
 export type ColConfig = {
   append?: string
   attrs: Record<string, unknown>
+  cellAttrs?: (row: any, col: ColConfig) => Record<string, unknown> | undefined
   checkbox?: boolean
-  class?: string | Array<any> | object
   colAttrs?: (row: any, col: ColConfig) => Record<string, unknown> | undefined
+  class?: string | Array<any> | object
   editable?: boolean | ((row: any) => boolean)
   filterable?: boolean
   fixed?: string | boolean
   format: (value: any) => unknown
   getter: (row: any, col: ColConfig) => unknown
   getterOnEdit?: boolean
   hasCustomSetter: boolean
-  header: string
+  header: string,
+  headerAttrs?: Record<string, unknown>,
   hidden?: boolean
   key: string
   options?: Array<{ label: string; value: any }>