Merge pull request #128 from Vizzuality/SKY30-191-m-16-blue-shading-r…

…epresenting-progress-in-the-table-is-not-working [SKY30-191] Remove blue bar colors from table rows
Vizzuality · Jan 15, 2024 · 555f123 · 555f123
2 parents 7464c5c + c2e754f
commit 555f123
Showing 1 changed file with 2 additions and 35 deletions.
diff --git a/frontend/src/containers/map/content/details/table/index.tsx b/frontend/src/containers/map/content/details/table/index.tsx
@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useRef } from 'react';
 
 import {
   flexRender,
@@ -14,16 +14,6 @@ const MapTable = ({ columns, data }) => {
   const tableRef = useRef<HTMLTableElement>();
   const firstColumnRef = useRef<HTMLTableCellElement>(null);
 
-  const [tableDimensions, setTableDimensions] = useState<{
-    firstColumnWidth: HTMLTableCellElement['offsetWidth'];
-    tableWidth: HTMLTableElement['offsetWidth'];
-    availableBarWidth: number;
-  }>({
-    firstColumnWidth: 0,
-    tableWidth: 0,
-    availableBarWidth: 0,
-  });
-
   const table = useReactTable<typeof data>({
     data,
     columns,
@@ -36,18 +26,6 @@ const MapTable = ({ columns, data }) => {
   const firstColumn = columns[0];
   const lastColumn = columns[columns.length - 1];
 
-  useLayoutEffect(() => {
-    const tableWidth = tableRef.current?.offsetWidth;
-    const firstColumnWidth = firstColumnRef.current?.offsetWidth;
-    const availableBarWidth = tableWidth - firstColumnWidth;
-
-    setTableDimensions({
-      firstColumnWidth,
-      tableWidth,
-      availableBarWidth,
-    });
-  }, [data]);
-
   return (
     <table ref={tableRef} className="whitespace-nowrap font-mono text-xs">
       <thead className="text-left">
@@ -78,19 +56,8 @@ const MapTable = ({ columns, data }) => {
       <tbody>
         {hasData &&
           table.getRowModel().rows.map((row) => {
-            const coverage = row.original?.coverage || null; // %;
-            const offset = tableDimensions.firstColumnWidth;
-            const barWidth = (coverage * tableDimensions.availableBarWidth) / 100;
-
             return (
-              <tr
-                key={row.id}
-                className="border-b border-t border-black"
-                style={{
-                  backgroundImage: `linear-gradient(to right, rgb(72, 121, 255) ${barWidth}px, transparent ${barWidth}px)`,
-                  backgroundPositionX: `${offset}px`,
-                }}
-              >
+              <tr key={row.id} className="border-b border-t border-black">
                 {row.getVisibleCells().map((cell) => {
                   const { column } = cell;
                   const isFirstColumn = column.id === firstColumn.accessorKey;