Merge pull request getredash#16 from codygo-solutions/line-behavior-c…

…hange move rows with redash-sticky key set to tfoot summary
eugenekx · Aug 24, 2023 · cad0f30 · cad0f30
2 parents 4de1cbf + ebbfef4
commit cad0f30
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/viz-lib/src/visualizations/table/Renderer.tsx b/viz-lib/src/visualizations/table/Renderer.tsx
@@ -7,6 +7,7 @@ import Popover from "antd/lib/popover";
 import { RendererPropTypes } from "@/visualizations/prop-types";
 
 import { prepareColumns, initRows, filterRows, sortRows } from "./utils";
+import ColumnTypes from "./columns";
 
 import "./renderer.less";
 import NotEnoughData from '@/components/NotEnoughData';
@@ -108,6 +109,10 @@ export default function Renderer({ options, data }: any) {
     orderBy,
   ]);
 
+  const specialKeyword = '<b>Total</b>'
+  const mainRows = useMemo(() => preparedRows.filter((r: any) => !Object.values(r.record ?? {}).includes(specialKeyword)), [preparedRows]) as any[]
+  const bottomRows = useMemo(() => preparedRows.filter((r: any) => Object.values(r.record ?? {}).includes(specialKeyword)), [preparedRows]) as any[]
+
   // If data or config columns change - reset sorting
   useEffect(() => {
     setOrderBy([]);
@@ -125,9 +130,33 @@ export default function Renderer({ options, data }: any) {
         data-test="TableVisualization"
         // @ts-expect-error ts-migrate(2322) FIXME: Type '{ key: any; dataIndex: string; align: any; s... Remove this comment to see the full error message
         columns={tableColumns}
-        dataSource={preparedRows}
+        dataSource={mainRows}
         pagination={false}
         showSorterTooltip={false}
+        summary={() => {
+          return (
+            <>
+              {
+                bottomRows.map((row, index) => (
+                  <Table.Summary.Row key={index}>
+                    {
+                      tableColumns.map((col: any, index) => {
+                        const com = col.render(row, row)
+                        return (
+                          <Table.Summary.Cell key={index} index={index} className={com.props?.className ?? ''}>
+                            <span style={{ textAlign: col.align, display: 'block' }}>
+                              {com.children}
+                            </span>
+                          </Table.Summary.Cell>
+                        )
+                      })
+                    }
+                  </Table.Summary.Row>
+                ))
+              }
+            </>
+          );
+        }}
       />
     </div>
   );

diff --git a/viz-lib/src/visualizations/table/renderer.less b/viz-lib/src/visualizations/table/renderer.less
@@ -38,6 +38,17 @@
     }
   }
 
+  .ant-table-summary {
+    background: #ffffff;
+    position: sticky;
+    bottom: 0;
+  }
+
+  table {
+    border-top: @border-width-base @border-style-base @border-color-split;
+    border-bottom: 0;
+  }
+
   .ant-table {
     overflow-x: auto;
     max-height: 100%;