feat: create way to change the text align of each header/column

src/components/DataTable.vue

@@ -57,7 +57,7 @@
               <span
                 v-else
                 class="header"
-                :class="`direction-${headerTextDirection}`"
+                :class="[header.textAlign ? `direction-${header.textAlign}` : `direction-${headerTextDirection}`]"
               >
                 <slot
                   v-if="slots[`header-${header.value}`]"
@@ -73,7 +73,7 @@
                   v-else-if="slots['header']"
                   name="header"
                   v-bind="header"
-                />   
+                />
                 <span
                   v-else
                   class="header-text"
@@ -143,7 +143,9 @@
                   'shadow': column === lastFixedColumn,
                   'can-expand': column === 'expand',
                 // eslint-disable-next-line max-len
-                }, typeof bodyItemClassName === 'string' ? bodyItemClassName : bodyItemClassName(column, index + 1), `direction-${bodyTextDirection}`]"
+                }, typeof bodyItemClassName === 'string' ? bodyItemClassName : bodyItemClassName(column, index + 1),
+                getTextAlign(column)
+                ]"
                 @click="column === 'expand' ? updateExpandingItemIndexList(index + prevPageEndIndex, item, $event) : null"
               > 
                 <slot
@@ -569,6 +571,12 @@ const getFixedDistance = (column: string, type: 'td' | 'th' = 'th') => {
   return undefined;
 };
 
+const getTextAlign = (column: string): string | undefined => {
+  const header = headersForRender.value.find((header) => header.value === column)
+  const align  = header?.textAlign || bodyTextDirection.value
+  return align ? `direction-${align}` : undefined
+}
+
 watch(loading, (newVal, oldVal) => {
   if (serverOptionsComputed.value) {
     // in server-side mode, turn to next page when api request finished.

src/types/internal.d.ts

@@ -1,4 +1,4 @@
-import type { SortType } from './main';
+import type { SortType, TextDirection } from './main';
 
 export type ServerOptionsComputed = {
   page: number
@@ -14,6 +14,7 @@ export type HeaderForRender = {
   sortType?: SortType | 'none',
   fixed?: Boolean,
   width?: number,
+  textAlign?: TextDirection
 }
 
 export type ClientSortOptions = {

src/types/main.d.ts

@@ -32,6 +32,7 @@ export type Header = {
   sortable?: boolean
   fixed?: boolean
   width?: number
+  textAlign?: TextDirection
 }
 
 export type ServerOptions = {

types/main.d.ts

@@ -32,6 +32,7 @@ export type Header = {
   sortable?: boolean
   fixed?: boolean
   width?: number
+  textAlign?: TextDirection
 }
 
 export type ServerOptions = {