Hidden rows (#40)

* feat(TableInteractionsManager): add hidden rows * chore(Package): fix version
Decathlon · Sep 3, 2021 · eade773 · eade773
1 parent 82d06d8
commit eade773
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@decathlon/react-table",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "React components for efficiently rendering large tabular data",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/table-interactions-manager/actions-types.ts b/src/components/table-interactions-manager/actions-types.ts
@@ -15,3 +15,6 @@ export type UPDATE_FIXED_ROWS_INDEXES = typeof UPDATE_FIXED_ROWS_INDEXES;
 
 export const UPDATE_COLUMNS_CURSOR = "UPDATE_COLUMNS_CURSOR";
 export type UPDATE_COLUMNS_CURSOR = typeof UPDATE_COLUMNS_CURSOR;
+
+export const UPDATE_HIDDEN_ROW_INDEXES = "UPDATE_HIDDEN_ROW_INDEXES";
+export type UPDATE_HIDDEN_ROW_INDEXES = typeof UPDATE_HIDDEN_ROW_INDEXES;
diff --git a/src/components/table-interactions-manager/actions.ts b/src/components/table-interactions-manager/actions.ts
@@ -31,6 +31,16 @@ export const updateHiddenColumns = (hiddenColumnsIds: string[]): UpdateHiddenCol
   hiddenColumnsIds
 });
 
+export interface UpdateHiddenRows {
+  type: actionTypes.UPDATE_HIDDEN_ROW_INDEXES;
+  hiddenRowIndexes: number[];
+}
+
+export const updateHiddenRows = (hiddenRowIndexes: number[]): UpdateHiddenRows => ({
+  type: actionTypes.UPDATE_HIDDEN_ROW_INDEXES,
+  hiddenRowIndexes
+});
+
 export interface UpdateFixedColumns {
   type: actionTypes.UPDATE_FIXED_COLUMNS_INDEXES;
   fixedColumnsIds: string[];
@@ -65,6 +75,7 @@ export type TableInteractionsAction =
   | UpdateCellWidth
   | UpdateRowHeight
   | UpdateHiddenColumns
+  | UpdateHiddenRows
   | UpdateColumnsCursor
   | UpdateFixedColumns
   | UpdateFixedRows;
diff --git a/src/components/table-interactions-manager/reducers.ts b/src/components/table-interactions-manager/reducers.ts
@@ -26,6 +26,8 @@ export interface ITableInteractionManagerState {
   rowHeight: CellDimension;
   /** The current hidden columns of the table (indexes). */
   hiddenColumnsIds: string[];
+  /** The current hidden rows of the table (indexes). */
+  hiddenRowIndexes: number[];
   /** The current fixed columns of the table (indexes). */
   fixedColumnsIds: string[];
   /** The current fixed rows of the table (indexes). */
@@ -40,7 +42,8 @@ export const initialState: ITableInteractionManagerState = {
   columnsCursor: null,
   hiddenColumnsIds: [],
   fixedColumnsIds: [],
-  fixedRowsIndexes: []
+  fixedRowsIndexes: [],
+  hiddenRowIndexes: []
 };
 
 const tableManagerReducer = (state: ITableInteractionManagerState = initialState, action: TableInteractionsAction) => {
@@ -60,6 +63,11 @@ const tableManagerReducer = (state: ITableInteractionManagerState = initialState
         ...state,
         hiddenColumnsIds: action.hiddenColumnsIds
       };
+    case actionTypes.UPDATE_HIDDEN_ROW_INDEXES:
+      return {
+        ...state,
+        hiddenRowIndexes: action.hiddenRowIndexes
+      };
     case actionTypes.UPDATE_FIXED_COLUMNS_INDEXES:
       return {
         ...state,

diff --git a/src/components/table-interactions-manager/table-interactions-manager.tsx b/src/components/table-interactions-manager/table-interactions-manager.tsx
@@ -9,7 +9,8 @@ import {
   updateCellWidth,
   updateColumnsCursor,
   updateFixedColumns,
-  updateFixedRows
+  updateFixedRows,
+  updateHiddenRows
 } from "./actions";
 import TableInteractionsManagerReducer, {
   ITableInteractionManagerState,
@@ -45,6 +46,8 @@ export interface ITableInteractionsManagerProps extends ITableInteractionManager
   fixedRowsIndexes: number[];
   /** The hidden columns controller. Please see the ColumnVisibilityController. */
   updateHiddenIds: (hiddenIds: string[]) => void;
+  /** The hidden rows controller. */
+  updateHiddenRowIndexes: (rowIndexes: number[]) => void;
   /** The fixed columns controller. */
   updateFixedColumnsIds: (fixedIds: string[]) => void;
   /** The fixed rows controller. */
@@ -90,6 +93,7 @@ const initialContext: ITableInteractionsManagerProps = {
   fixedColumnsIndexes: [],
   fixedRowsIndexes: [],
   updateHiddenIds: nullFunction,
+  updateHiddenRowIndexes: nullFunction,
   updateFixedColumnsIds: nullFunction,
   updateFixedRowsIndexes: nullFunction,
   updateRowHeight: nullFunction,
@@ -279,6 +283,7 @@ TableInteractionsManager.defaultProps = {
 
 const mapDispatchToProps = (dispatch: React.Dispatch<TableInteractionsAction>) => ({
   updateHiddenIds: (hiddenIds: string[]) => dispatch(updateHiddenColumns(hiddenIds)),
+  updateHiddenRowIndexes: (hiddenIndexes: number[]) => dispatch(updateHiddenRows(hiddenIndexes)),
   updateFixedColumnsIds: (fixedIds: string[]) => dispatch(updateFixedColumns(fixedIds)),
   updateFixedRowsIndexes: (fixedIndexes: number[]) => dispatch(updateFixedRows(fixedIndexes)),
   updateRowHeight: (value: CellDimension) => dispatch(updateRowHeight(value)),

diff --git a/stories/components/table-interactions-manager/table-interactions-manager.stories.tsx b/stories/components/table-interactions-manager/table-interactions-manager.stories.tsx
@@ -151,6 +151,42 @@ storiesOf("Table interactions manager", module)
   .add("Column id scroll controller", () => <ColumnIdScrollController {...defaultColumnIdScrollControllerProps} />, {
     info: storyInfoDefault
   })
+  .add("Hide row", () => (
+    <TabeInteractionManager toggleableColumns={toggleableColumns}>
+      <TableInteractionsContext.Consumer>
+        {({ onHorizontallyScroll, updateHiddenRowIndexes, hiddenRowIndexes, cellWidth, rowHeight, tableRef }) => {
+          return (
+            <>
+              <div style={toolBarStyle}>
+                <Button onClick={() => updateHiddenRowIndexes([1])}>Hide first row</Button>
+                <Button onClick={() => updateHiddenRowIndexes([])}>Display first row</Button>
+              </div>
+              <div
+                style={{ height: "calc(100vh - 55px)", width: "100%" }}
+                className={cellWidth.size === CellSize.small && "small-table"}
+              >
+                <Table
+                  ref={tableRef}
+                  {...defaultProps}
+                  columns={{ 0: { style: { justifyContent: "left" }, size: 200 } }}
+                  isVirtualized
+                  isSelectable={false}
+                  virtualizerProps={{
+                    hiddenRows: hiddenRowIndexes,
+                    minColumnWidth: cellWidth.value,
+                    minRowHeight: rowHeight.value,
+                    fixedRows,
+                    fixedColumns,
+                    onHorizontallyScroll
+                  }}
+                />
+              </div>
+            </>
+          );
+        }}
+      </TableInteractionsContext.Consumer>
+    </TabeInteractionManager>
+  ))
   .add("Integrated", () => (
     <TabeInteractionManager
       initialConfig={{