new data viewer with selection

package-lock.json

@@ -13904,6 +13904,11 @@
         "tslib": "^1.0.0"
       }
     },
+    "react-table": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.6.3.tgz",
+      "integrity": "sha512-hfPF13zDLxPMpLKzIKCE8RZud9T/XrRTsaCIf8zXpWZIZ2juCl7qrGpo3AQw9eAetXV5DP7s2GDm+hht7qq5Dw=="
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",

package.json

@@ -19,6 +19,7 @@
     "react-icons": "^4.1.0",
     "react-scripts": "4.0.1",
     "react-select-search": "^2.2.4",
+    "react-table": "^7.6.3",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

src/components/Node/DataViewer/DataViewerTable.jsx

@@ -3,11 +3,13 @@ import React, { useState } from 'react';
 import { useAttributesContext } from '../../../contexts/AttributesContext';
 import { Search as SearchBar } from '../../SearchBar';
 import { CloseIcon } from '@chakra-ui/icons';
+import ReactTable from './ReactTable';
 
 function DataViewerTable({ data }) {
-  console.log(data);
+  //console.log(data);
   const [columns, setColumns] = useState([]);
   const [selected, setSelected] = useState([]);
+  const [state, setState] = useState({ selected: null });
   const { attributes } = useAttributesContext();
   function handleSetColumns(value) {
     setColumns(value);
@@ -26,7 +28,7 @@ function DataViewerTable({ data }) {
         tmp.splice(index, 1);
       }
     }
-    console.log(tmp);
+    //console.log(tmp);
     setSelected(tmp);
   }
 
@@ -59,7 +61,8 @@ function DataViewerTable({ data }) {
         </Button>
       </Box>
       <Box overflow="auto" bg="gray.200" d="flex" justifyContent="center">
-        <Table size="sm" bg="gray.200" w="auto">
+        <ReactTable set={data} cols={columns} />
+        {/* <Table size="sm" bg="gray.200" w="auto">
           <Thead>
             <Tr>
               {columns.length !== 0 ? (
@@ -111,7 +114,7 @@ function DataViewerTable({ data }) {
               </Tr>
             )}
           </Tbody>
-        </Table>
+        </Table> */}
       </Box>
     </Box>
   );

src/components/Node/DataViewer/ReactTable.jsx

@@ -0,0 +1,139 @@
+// @ts-nocheck
+import React, { useState } from 'react';
+import { Table, Thead, Tbody, Tr, Th, Td } from '@chakra-ui/react';
+import { TriangleDownIcon, TriangleUpIcon } from '@chakra-ui/icons';
+import { useTable, useSortBy, useRowSelect } from 'react-table';
+
+const IndeterminateCheckbox = React.forwardRef(({ indeterminate, ...rest }, ref) => {
+  const defaultRef = React.useRef();
+  const resolvedRef = ref || defaultRef;
+
+  React.useEffect(() => {
+    resolvedRef.current.indeterminate = indeterminate;
+  }, [resolvedRef, indeterminate]);
+
+  return (
+    <>
+      <input type="checkbox" ref={resolvedRef} {...rest} />
+    </>
+  );
+});
+
+function ReactTable({ set, cols }) {
+  console.log(set, cols);
+  const data = React.useMemo(() => set, []);
+
+  function prepareHeaders(cols) {
+    let tmp = [];
+    for (let item of cols.sort()) {
+      tmp.push({
+        Header: item,
+        accessor: item,
+      });
+    }
+    console.log(tmp);
+    return tmp;
+  }
+  const columns = React.useMemo(() => prepareHeaders(cols), [cols]);
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    selectedFlatRows,
+    state: { selectedRowIds },
+  } = useTable(
+    {
+      columns,
+      data,
+    },
+    useSortBy,
+    useRowSelect,
+    hooks => {
+      hooks.visibleColumns.push(columns => [
+        // Let's make a column for selection
+        {
+          id: 'selection',
+          // The header can use the table's getToggleAllRowsSelectedProps method
+          // to render a checkbox
+          Header: ({ getToggleAllRowsSelectedProps }) => (
+            <div>
+              {cols.length !== 0 ? (
+                <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
+              ) : (
+                <div>Select columns to see rows</div>
+              )}
+            </div>
+          ),
+          // The cell can use the individual row's getToggleRowSelectedProps method
+          // to the render a checkbox
+          Cell: ({ row }) => (
+            <div>
+              <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
+            </div>
+          ),
+        },
+        ...columns,
+      ]);
+    }
+  );
+
+  return (
+    <Table {...getTableProps()} size="sm" bg="gray.200" w="auto" overflowX="auto" d="block">
+      <Thead>
+        {headerGroups.map(headerGroup => (
+          <Tr {...headerGroup.getHeaderGroupProps()}>
+            <Th fontSize={11} p={1}>
+              {cols.length !== 0 ? 'ID' : ''}
+            </Th>
+            {headerGroup.headers.map(column => (
+              <Th
+                {...column.getHeaderProps(column.getSortByToggleProps())}
+                isNumeric={column.isNumeric}
+                fontSize={11}
+                p={1}
+              >
+                {column.render('Header')}
+                {column.isSorted ? (
+                  column.isSortedDesc ? (
+                    <TriangleDownIcon aria-label="sorted descending" />
+                  ) : (
+                    <TriangleUpIcon aria-label="sorted ascending" />
+                  )
+                ) : null}
+              </Th>
+            ))}
+          </Tr>
+        ))}
+      </Thead>
+      <Tbody {...getTableBodyProps()}>
+        {rows.map((row, i) => {
+          prepareRow(row);
+          return (
+            <Tr
+              {...row.getRowProps()}
+              _hover={{
+                background: 'green.400',
+                fontWeight: 'bolder',
+              }}
+              bg={Object.keys(selectedRowIds).includes(i.toString()) ? 'gray.400' : 'gray.200'}
+            >
+              <Td fontSize={10} p={1}>
+                {i + 1}
+              </Td>
+              {row.cells.map(cell => (
+                <Td {...cell.getCellProps()} isNumeric={cell.column.isNumeric} fontSize={10} p={1}>
+                  {cell.render('Cell')}
+                </Td>
+              ))}
+            </Tr>
+          );
+        })}
+      </Tbody>
+    </Table>
+  );
+}
+
+export default ReactTable;