Merge pull request #39 from HC200ok/Fix/fixed-columns

fix:fixed-column-bug-in-safari

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.2.11",
+  "version": "1.2.15",
   "types": "./types/main.d.ts",
   "license": "MIT",
   "files": [

src/components/DataTable.vue

@@ -12,7 +12,7 @@
         'show-shadow': showShadow,
       }"
     >
-      <table>
+      <table :class="{'fixed': fixedHeaders.length}">
         <colgroup>
           <col
             v-for="(header, index) in headersForRender"
@@ -25,8 +25,6 @@
             <th
               v-for="(header, index) in headersForRender"
               :key="index"
-              colspan="1"
-              rowspan="1"
               :class="{
                 sortable: header.sortable,
                 'none': header.sortable && header.sortType === 'none',
@@ -78,8 +76,6 @@
               <td
                 v-for="(column, i) in headerColumns"
                 :key="i"
-                colspan="1"
-                rowspan="1"
                 :style="getFixedDistance(column, 'td')"
                 :class="{'hasShadow': column === lastFixedColumn}"
               >
@@ -497,12 +493,6 @@ type FixedColumnsInfo = {
   width: number,
 };
 
-const getColStyle = (header: HeaderForRender): string | undefined => {
-  const width = header.width ?? (header.fixed ? 100 : null);
-  if (width) return `width: ${width}px; min-width: ${width}px;`;
-  return undefined;
-};
-
 const hasFixedColumnsFromUser = computed(() => props.headers.findIndex((header) => header.fixed) !== -1);
 const fixedHeadersFromUser = computed(() => {
   if (hasFixedColumnsFromUser.value) return props.headers.filter((header) => header.fixed);
@@ -557,6 +547,12 @@ const lastFixedColumn = computed((): string => {
   return fixedHeaders.value[fixedHeaders.value.length - 1].value;
 });
 
+const getColStyle = (header: HeaderForRender): string | undefined => {
+  const width = header.width ?? (fixedHeaders.value.length ? 100 : null);
+  if (width) return `width: ${width}px; min-width: ${width}px;`;
+  return undefined;
+};
+
 const fixedColumnsInfos = computed((): FixedColumnsInfo[] => {
   if (!fixedHeaders.value.length) return [];
   const fixedHeadersWidthArr = fixedHeaders.value.map((header) => header.width ?? 100);
@@ -1001,6 +997,9 @@ defineExpose({
       }
 
       table {
+        &.fixed {
+          table-layout: fixed;
+        }
         display: table;
         margin: 0px;
         width: 100%;

src/modes/Client.vue

@@ -112,11 +112,11 @@ const switchToNested = () => {
 };
 
 const headers: Header[] = [
-  { text: 'Name', value: 'name', fixed: true, width: 200 },
+  { text: 'Name', value: 'name' },
   { text: 'Address', value: 'address', width: 200 },
-  { text: 'Height', value: 'info.out.height', sortable: true, width: 200 },
-  { text: 'Weight', value: 'info.out.weight', sortable: true, width: 200 },
-  { text: 'Age', value: 'age', sortable: true, fixed: true, width: 200 },
+  { 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: 'Favourite sport', value: 'favouriteSport', width: 200 },
   { text: 'Favourite fruits', value: 'favouriteFruits', width: 200 },
 ];