Merge pull request #26 from datopian/1464-fix-table-preview-issues

[BUG FIX] Frontend table preview

Author: demenech

components/responsiveGrid/Table.tsx

@@ -1,11 +1,21 @@
+import { useEffect, useRef } from "react";
 import { useResourceData } from "./DataProvider";
 import TableColumnValue from "./TableColValue";
 import TableHead from "./TableHead";
 
 export default function TableData() {
-  const { paginatedData, columns } = useResourceData();
+  const { paginatedData, columns, data } = useResourceData();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (scrollRef.current) {
+      setTimeout(() => {
+        if (scrollRef.current) {
+          scrollRef.current.scrollLeft = 0;
+        } }, 100);
+    }
+  }, [data]);
   return (
-    <div className="overflow-auto max-h-[750px] relative border-y min-h-[500px] w-full">
+    <div ref={scrollRef} className="overflow-auto max-h-[750px] relative border-y min-h-[500px] w-full">
       {/* Table */}
       <table
         className="min-w-full table-auto border-collapse border-0 static"

components/responsiveGrid/TableColValue.tsx

@@ -4,16 +4,18 @@ export default function TableColumnValue({ column, value }) {
   const { visibleColumns, pinnedColumns } = useResourceData();
   const isVisible = visibleColumns.includes(column);
   const isPinned = pinnedColumns.includes(column);
+  const _value = typeof value === "boolean" ? value.toString() : value;
+
   return (
     <td
-      className={` px-3 py-4 text-sm text-gray-500   ${
+      className={`px-3 py-4 text-sm text-gray-500 ${
         !isVisible ? "hidden" : ""
       } ${isPinned ? "sticky left-[-1px] bg-accent-50 z-10 font-medium" : ""}`}
       role="gridcell"
       tabIndex={0}
-      aria-label={value}
+      aria-label={_value}
     >
-      <span className=" block max-w-[400px] w-[max-content] ">{value}</span>
+      <span className="block max-w-[400px] w-[max-content]">{_value}</span>
       {isPinned && (
         <span className="absolute right-[-1px] h-full w-[1px] bg-gray-100 top-0"></span>
       )}