Merge pull request #98 from HC200ok/new-props/text-direction

New props/text direction

Author: HC200ok

package.json

@@ -3,7 +3,7 @@
   "author": "HC200ok",
   "description": "A customizable and easy-to-use data table component made with Vue.js 3.x.",
   "private": false,
-  "version": "1.4.14",
+  "version": "1.4.15",
   "types": "./types/main.d.ts",
   "license": "MIT",
   "files": [

src/components/DataTable.vue

@@ -53,6 +53,7 @@
               <span
                 v-else
                 class="header"
+                :class="`direction-${headerTextDirection}`"
               >
                 <slot
                   v-if="slots[`header-${header.value}`]"
@@ -80,8 +81,8 @@
           class="vue3-easy-data-table__body"
           :class="{'row-alternation': alternating}"
         >
-          <slot 
-            name="body.prepend"
+          <slot
+            name="body-prepend"
             v-bind="{
               items: pageItems,
               pagination: {
@@ -111,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
@@ -155,8 +157,8 @@
               </td>
             </tr>
           </template>
-          <slot 
-            name="body.append"
+          <slot
+            name="body-append"
             v-bind="{
               items: pageItems,
               pagination: {
@@ -290,6 +292,7 @@ const props = defineProps({
 });
 
 const {
+  bodyTextDirection,
   checkboxColumnWidth,
   expandColumnWidth,
   filterOptions,
@@ -298,6 +301,7 @@ const {
   fixedHeader,
   fixedIndex,
   headers,
+  headerTextDirection,
   indexColumnWidth,
   items,
   itemsSelected,

src/modes/Client.vue

@@ -34,18 +34,9 @@
       @click-row="showItem"
       @update-sort="updateSort"
       hide-footer
+      body-text-direction="left"
+      header-text-direction="left"
     >
-      <template #body.prepend="body">
-        <tr>
-          <td
-            v-for="(header, index) in body.headers"
-            :key="index"
-          >
-            <span v-if="isDataHeader(header)">Coloumn {{ header.text }}</span>
-          </td>
-        </tr>
-      </template>
-
       <template #expand="item">
         <div style="padding: 15px">
           {{ item.name }} won championships
@@ -132,11 +123,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('');
 
@@ -153,15 +144,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[] = [
@@ -313,7 +304,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;
@@ -326,7 +317,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'