add headerTextDirection & bodyTextDirection

Author: HC200ok

src/components/DataTable.vue

@@ -53,6 +53,7 @@
               <span
                 v-else
                 class="header"
+                :class="`direction-${headerTextDirection}`"
               >
                 <slot
                   v-if="slots[`header-${header.value}`]"
@@ -80,6 +81,21 @@
           class="vue3-easy-data-table__body"
           :class="{'row-alternation': alternating}"
         >
+          <slot
+            name="body-prepend"
+            v-bind="{
+              items: pageItems,
+              pagination: {
+                isFirstPage,
+                isLastPage,
+                currentPaginationNumber,
+                maxPaginationNumber,
+                nextPage,
+                prevPage
+              },
+              headers: headersForRender
+            }"
+          />
           <template
             v-for="(item, index) in pageItems"
             :key="index"
@@ -96,7 +112,8 @@
                 :class="[{
                   'shadow': column === lastFixedColumn,
                   'can-expand': column === 'expand',
-                }, typeof bodyItemClassName === 'string' ? bodyItemClassName : bodyItemClassName(column, i)]"
+                // eslint-disable-next-line max-len
+                }, typeof bodyItemClassName === 'string' ? bodyItemClassName : bodyItemClassName(column, i), `direction-${bodyTextDirection}`]"
                 @click="column === 'expand' ? updateExpandingItemIndexList(index, item, $event) : null"
               >
                 <slot
@@ -140,6 +157,21 @@
               </td>
             </tr>
           </template>
+          <slot
+            name="body-append"
+            v-bind="{
+              items: pageItems,
+              pagination: {
+                isFirstPage,
+                isLastPage,
+                currentPaginationNumber,
+                maxPaginationNumber,
+                nextPage,
+                prevPage
+              },
+              headers: headersForRender
+            }"
+          />
         </tbody>
       </table>
       <div
@@ -260,6 +292,7 @@ const props = defineProps({
 });
 
 const {
+  bodyTextDirection,
   checkboxColumnWidth,
   expandColumnWidth,
   filterOptions,
@@ -268,6 +301,7 @@ const {
   fixedHeader,
   fixedIndex,
   headers,
+  headerTextDirection,
   indexColumnWidth,
   items,
   itemsSelected,

src/modes/Client.vue

@@ -34,8 +34,9 @@
       @click-row="showItem"
       @update-sort="updateSort"
       hide-footer
+      body-text-direction="left"
+      header-text-direction="left"
     >
-
       <template #expand="item">
         <div style="padding: 15px">
           {{ item.name }} won championships
@@ -118,11 +119,11 @@ import {
 // import type { UseRowsPerPageReturn } from 'use-vue3-easy-data-table';
 import type {
   Header, Item, FilterOption, ClickRowArgument, UpdateSortArgument, HeaderItemClassNameFunction, BodyItemClassNameFunction, BodyRowClassNameFunction,
+  TextDirection,
 } from '../types/main';
 import DataTable from '../components/DataTable.vue';
 import { mockClientNestedItems, mockClientItems, mockDuplicateClientNestedItems } from '../mock';
 
-
 const searchField = ref('name');
 const searchValue = ref('');
 
@@ -139,15 +140,15 @@ const switchToNested = () => {
 const headers: Header[] = [
   { text: 'Name', value: 'name' },
   {
-    text: 'Address', value: 'address', width: 200, fixed: true,
+    text: 'Address', value: 'address', fixed: true,
   },
   { text: 'Height', value: 'info.out.height', sortable: true },
   { text: 'Weight', value: 'info.out.weight', sortable: true },
   {
-    text: 'Age', value: 'age', sortable: true, width: 200,
+    text: 'Age', value: 'age', sortable: true
   },
-  { text: 'Favourite sport', value: 'favouriteSport', width: 200 },
-  { text: 'Favourite fruits', value: 'favouriteFruits', width: 200 },
+  { text: 'Favourite sport', value: 'favouriteSport' },
+  { text: 'Favourite fruits', value: 'favouriteFruits' },
 ];
 
 // const headers: Header[] = [
@@ -296,7 +297,7 @@ const updateRowsPerPageSelect = (e: Event) => {
   --easy-table-header-font-color: #c1cad4;
   --easy-table-header-background-color: #2d3a4f;
 
-  --easy-table-header-item-padding: 10px 15px;
+  /* --easy-table-header-item-padding: 10px 15px; */
 
   --easy-table-body-even-row-font-color: #fff;
   --easy-table-body-even-row-background-color: #4c5d7a;
@@ -309,7 +310,7 @@ const updateRowsPerPageSelect = (e: Event) => {
   --easy-table-body-row-hover-font-color: #2d3a4f;
   --easy-table-body-row-hover-background-color: #eee;
 
-  --easy-table-body-item-padding: 10px 15px;
+  /* --easy-table-body-item-padding: 10px 15px; */
 
   --easy-table-footer-background-color: #2d3a4f;
   --easy-table-footer-font-color: #c0c7d2;

src/propsWithDefault.ts

@@ -2,6 +2,7 @@ import { PropType } from 'vue';
 import type {
   SortType, Item, ServerOptions, FilterOption,
   HeaderItemClassNameFunction, BodyItemClassNameFunction, BodyRowClassNameFunction,
+  TextDirection,
 } from './types/main';
 
 export default {
@@ -45,6 +46,14 @@ export default {
     type: Boolean,
     default: false,
   },
+  headerTextDirection: {
+    type: String as PropType<TextDirection>,
+    default: 'left',
+  },
+  bodyTextDirection: {
+    type: String as PropType<TextDirection>,
+    default: 'left',
+  },
   hideFooter: {
     type: Boolean,
     default: false,
@@ -149,4 +158,4 @@ export default {
     type: Boolean,
     default: false,
   },
-}
+};

src/scss/checbox.scss

@@ -17,7 +17,8 @@ $line-color: #fff;
   position: relative;
   width: $checkbox-size;
   height: $checkbox-size;
-
+  font-size: var(--easy-table-body-row-font-size);
+  margin: 0 auto;
   label {
     cursor: pointer;
     display: inline;

src/scss/vue3-easy-data-table.scss

@@ -118,6 +118,15 @@ table {
   .header {
     display: flex;
     align-items: center;
+    &.direction-left {
+      justify-content: flex-start;
+    }
+    &.direction-center {
+      justify-content: center;
+    }
+    &.direction-right {
+      justify-content: flex-end;
+    }
   }
 
   &.sortable {
@@ -198,6 +207,18 @@ table {
   border: none;
   border-bottom: var(--easy-table-row-border);
 
+  &.direction-left {
+    text-align: left;
+  }
+
+  &.direction-center {
+    text-align: center;
+  }
+
+  &.direction-right {
+    text-align: right;
+  }
+
   position: relative;
   .expand-icon {
     border: solid;

src/types/main.d.ts

@@ -50,3 +50,5 @@ export type UpdateSortArgument = {
 export type HeaderItemClassNameFunction = (header: Header, index: number) => string
 export type BodyRowClassNameFunction = (item: Item, index: number) => string
 export type BodyItemClassNameFunction = (column: string, index: number) => string
+
+export type TextDirection = 'center' | 'left' | 'right'

types/main.d.ts

@@ -50,3 +50,5 @@ export type UpdateSortArgument = {
 export type HeaderItemClassNameFunction = (header: Header, index: number) => string
 export type BodyRowClassNameFunction = (item: Item, index: number) => string
 export type BodyItemClassNameFunction = (column: string, index: number) => string
+
+export type TextDirection = 'center' | 'left' | 'right'