Add Footers to Tree Tables

src/component/CellWrapper.tsx

@@ -33,6 +33,6 @@ export default class CellWrapper<TData> extends Component<CellWrapperProps<TData
 const STYLE_COLUMN: CSSProperties = {
   boxSizing: 'border-box',
   position: 'relative',
-  overflow: 'hidden',
+  overflow: 'visible',
   width: '100%',
 };

src/component/Column.tsx

@@ -5,6 +5,8 @@ import Row from '../model/row';
 export type ColumnProps<TData> = {
   renderCell: (row: Row<TData>) => React.ReactNode;
   renderHeaderCell: () => React.ReactNode;
+  renderFooterCell: () => React.ReactNode;
+
 
   grow?: number;
   basis?: string; // <CSS size> | auto

src/component/FooterCellWrapper.tsx

@@ -0,0 +1,35 @@
+import React, { Component, CSSProperties } from 'react';
+
+
+export type FooterCellWrapperProps = {
+  renderFooterCell: () => React.ReactNode;
+
+  grow?: number;
+  basis?: string; // <CSS size> | auto
+}
+
+export default class FooterCellWrapper extends Component<FooterCellWrapperProps, {}> {
+  static defaultProps = {
+    grow: 1,
+    basis: '0px',
+  };
+
+  render() {
+    const { renderFooterCell, grow, basis } = this.props;
+
+    return (
+      <div className={`cp_tree-table_footer-cell`}
+        style={{ ...STYLE_COLUMN, flexGrow: grow, flexBasis: basis }}>
+        { renderFooterCell() }
+      </div>
+    );
+  }
+}
+
+
+const STYLE_COLUMN: CSSProperties = {
+  boxSizing: 'border-box',
+  position: 'relative',
+  overflow: 'visible',
+  width: '100%',
+};

src/component/HeaderCellWrapper.tsx

@@ -30,6 +30,6 @@ export default class HeaderCellWrapper extends Component<HeaderCellWrapperProps,
 const STYLE_COLUMN: CSSProperties = {
   boxSizing: 'border-box',
   position: 'relative',
-  overflow: 'hidden',
+  overflow: 'visible',
   width: '100%',
 };

src/component/TreeTable.tsx

@@ -3,6 +3,7 @@ import Column, { ColumnProps } from './Column';
 import TreeTableHeader from './TreeTableHeader';
 import VirtualList from './VirtualList';
 import TreeState from '../model/tree-state';
+import TreeTableFooter from './TreeTableFooter';
 
 
 export type TreeTableProps<TData> = {
@@ -21,6 +22,7 @@ export type TreeTableProps<TData> = {
   // View properties
   height?: number; // view height (px)
   headerHeight?: number; // header height (px)
+  footerHeight?: number; // footer height (px)
   className?: string;
 }
 
@@ -33,7 +35,7 @@ export default class TreeTable<TData> extends Component<TreeTableProps<TData>, {
 
   render() {
     const { value, children, onScroll,
-      height, headerHeight, className } = this.props;
+      height, headerHeight, footerHeight ,className } = this.props;
 
     const columnsDef: Array<ColumnProps<TData>> = [];
     Children
@@ -52,6 +54,7 @@ export default class TreeTable<TData> extends Component<TreeTableProps<TData>, {
           onChange={this.handleChange}
           ref={this.vListRef}
           onScroll={onScroll || noopOnScroll} /> }
+          <TreeTableFooter columns={columnsDef} height={footerHeight}/>
       </div>
     );
   }

src/component/TreeTableFooter.tsx

@@ -0,0 +1,45 @@
+import React, { Component, CSSProperties } from 'react';
+import { ColumnProps } from './Column';
+import FooterCellWrapper from './FooterCellWrapper';
+
+
+export type TreeTableFooterProps<TData> = {
+  columns: Array<ColumnProps<TData>>;
+  height?: number;
+}
+
+export default class TreeTableFooter<TData> extends Component<TreeTableFooterProps<TData>, {}> {
+  static defaultProps = {
+    height: 26,
+  };
+
+  render() {
+    const { columns, height } = this.props;
+
+
+    return (
+      <div className="cp_tree-footer"
+        style={{ ...STYLE_ROW, height: `${height}px` }}>
+        {columns.map((column: ColumnProps<TData>, indexKey) => {
+          return (
+            <FooterCellWrapper key={indexKey}
+              renderFooterCell={column.renderFooterCell} 
+
+              grow={column.grow}
+              basis={column.basis}/>
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+
+const STYLE_ROW: CSSProperties = {
+  display: 'flex',
+
+  boxSizing: 'border-box',
+  position: 'relative',
+  overflow: 'visible',
+  width: '100%',
+};

src/component/TreeTableHeader.tsx

@@ -40,6 +40,6 @@ const STYLE_ROW: CSSProperties = {
 
   boxSizing: 'border-box',
   position: 'relative',
-  overflow: 'hidden',
+  overflow: 'visible',
   width: '100%',
 };

src/component/VirtualListRow.tsx

@@ -56,6 +56,6 @@ const STYLE_ROW: CSSProperties = {
 
   boxSizing: 'border-box',
   position: 'relative',
-  overflow: 'hidden',
+  overflow: 'visible',
   width: '100%',
 };

src/model/tree-state.ts

@@ -276,7 +276,7 @@ export default class TreeState<T> {
       return;
     }
     for (let i = 0; i < this.data.length; i++) {
-      if (this.data[i].data == node.data) {
+      if (JSON.stringify(this.data[i].data) === JSON.stringify(node.data)) {
         return this.data[i];
       }
     }