Use different icons for sorting, Table styles from ui library, fix

example
NASA-IMPACT · Aug 3, 2023 · 0e61272 · 0e61272
1 parent ffc91ee
commit 0e61272
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 63 deletions.
diff --git a/app/scripts/components/common/blocks/lazy-components.js b/app/scripts/components/common/blocks/lazy-components.js
@@ -4,8 +4,7 @@ import LazyLoad from 'react-lazyload';
 import Chart from '$components/common/chart/block';
 import { chartMaxHeight } from '$components/common/chart/constant';
 
-import Table from '$components/common/table';
-import { tableHeight } from '$components/common/table/markup';
+import Table, { tableHeight } from '$components/common/table';
 import CompareImage from '$components/common/blocks/images/compare';
 
 import Map, { mapHeight } from '$components/common/blocks/block-map';

diff --git a/app/scripts/components/common/table/index.tsx b/app/scripts/components/common/table/index.tsx
@@ -11,19 +11,54 @@ import {
 import { useVirtual } from 'react-virtual';
 import { Sheet2JSONOpts } from 'xlsx';
 import {
-  CollecticonArrowLoop,
-  CollecticonArrowDown,
-  CollecticonArrowUp
+  CollecticonSortAsc,
+  CollecticonSortDesc,
+  CollecticonSortNone
 } from '@devseed-ui/collecticons';
+import { Table } from '@devseed-ui/typography';
 import { Button } from '@devseed-ui/button';
-import { PlaceHolderWrapper, TableWrapper, StyledTable } from './markup';
+import styled from 'styled-components';
+import { themeVal } from '@devseed-ui/theme-provider';
+
 import useLoadFile from '$utils/use-load-file';
 interface TablecomponentProps {
   dataPath: string;
   excelOption?: Sheet2JSONOpts;
   columnToSort?: string[];
 }
 
+export const tableHeight = '400';
+
+const PlaceHolderWrapper = styled.div`
+  display: flex;
+  height: ${tableHeight}px;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+`;
+
+const TableWrapper = styled.div`
+  display: flex;
+  max-width: 100%;
+  max-height: ${tableHeight}px;
+  overflow: auto;
+`;
+
+const StyledTable = styled(Table)`
+  thead {
+    border-bottom: 2px solid ${themeVal('color.base-200')};
+  }
+  thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: white;
+    button {
+      width: 100%;
+    }
+  }
+`;
+
 export default function TableComponent({
   dataPath,
   excelOption,
@@ -78,11 +113,7 @@ export default function TableComponent({
       )}
       {dataError && (
         <PlaceHolderWrapper>
-          {' '}
-          <p>
-            {' '}
-            Something went wrong while loading the data. Please try later.{' '}
-          </p>
+          <p>Something went wrong while loading the data. Please try later. </p>
         </PlaceHolderWrapper>
       )}
       {dataLoaded && (
@@ -103,20 +134,20 @@ export default function TableComponent({
                           variation='base-text'
                         >
                           {(header.column.getIsSorted() as string) == 'asc' && (
-                            <CollecticonArrowUp
+                            <CollecticonSortAsc
                               meaningful={true}
                               title='Sorted in ascending order'
                             />
                           )}
                           {(header.column.getIsSorted() as string) ==
                             'desc' && (
-                            <CollecticonArrowDown
+                            <CollecticonSortDesc
                               meaningful={true}
                               title='Sorted in descending order'
                             />
                           )}
                           {!header.column.getIsSorted() && (
-                            <CollecticonArrowLoop
+                            <CollecticonSortNone
                               meaningful={true}
                               title={`Sort the rows with this column's value`}
                             />

diff --git a/app/scripts/components/common/table/markup.tsx b/app/scripts/components/common/table/markup.tsx
diff --git a/app/scripts/components/sandbox/table/table.mdx b/app/scripts/components/sandbox/table/table.mdx
@@ -17,7 +17,7 @@
 
 <Block>
   <Figure>
-    <Table fileName="/public/example.csv" />
+    <Table dataPath="/public/example.csv" />
     <Caption> Table example from csv</Caption>
   </Figure>
 </Block>