orc-shared 5.10.0-dev.2 → 5.10.0-dev.21

package/src/components/MaterialUI/DataDisplay/Table.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState, useImperativeHandle } from "react";
 import TableMui from "@material-ui/core/Table";
 import TableContainer from "@material-ui/core/TableContainer";
 import TableHead from "@material-ui/core/TableHead";
@@ -10,6 +10,7 @@ import TableProps, { isTableProps } from "./TableProps";
 import classNames from "classnames";
 import ResizeDetector from "react-resize-detector";
 import { isEqual } from "lodash";
+import useViewState from "../../../hooks/useViewState";
 
 export const useStyles = makeStyles(theme => ({
 	container: {
@@ -303,6 +304,14 @@ const buildTableRows = (
 };
 
 const FullTable = React.forwardRef((props, ref) => {
+	return props.saveScrollbarPosition ? (
+		<FullTableWithSavedScrollbar {...props} ref={ref} />
+	) : (
+		<DefaultFullTable {...props} ref={ref} />
+	);
+});
+
+const DefaultFullTable = React.forwardRef((props, ref) => {
 	const scrollEvent = evt => {
 		if (
 			evt.target.scrollHeight - (evt.target.scrollTop + evt.target.offsetHeight) < 100 &&
@@ -310,6 +319,8 @@ const FullTable = React.forwardRef((props, ref) => {
 		) {
 			props.scrollLoader(props.latestPage + 1);
 		}
+
+		props.saveScrollBarPosition?.(evt);
 	};
 
 	return (
@@ -318,6 +329,7 @@ const FullTable = React.forwardRef((props, ref) => {
 			className={classNames(props.classes.tableContainer, props.customClasses.tableContainer)}
 			ref={ref}
 			onScroll={scrollEvent}
+			data-qa="scrollable-table-div"
 		>
 			<ResizeDetector onResize={props.onResize} />
 			<TableMui
@@ -345,132 +357,196 @@ const FullTable = React.forwardRef((props, ref) => {
 	);
 });
 
-const Table = ({
-	tableInfo,
-	headers,
-	rows,
-	scrollLoader,
-	latestPage,
-	pageLength,
-	placeholder,
-	tableProps,
-	context,
-}) => {
-	if (isTableProps(tableProps) === false) {
-		throw new TypeError("tableProps property is not of type TableProps");
+const FullTableWithSavedScrollbar = React.forwardRef((props, ref) => {
+	if (props.saveScrollbarPosition && !props.tableName) {
+		throw new Error("prop 'tableName' is required if 'saveScrollbarPosition' is set to true.");
 	}
 
-	const customClasses = tableProps?.get(TableProps.propNames.classes) || {};
-	const selectMode = tableProps?.get(TableProps.propNames.selectMode) || false;
-	const stickyHeader = tableProps?.get(TableProps.propNames.stickyHeader) || false;
-	const withoutTopBorder = tableProps?.get(TableProps.propNames.withoutTopBorder) || false;
-	const onRowClick = tableProps?.get(TableProps.propNames.onRowClick) || null;
-	const deepPropsComparation = tableProps?.get(TableProps.propNames.deepPropsComparation) || false;
-	const isEditingMode = tableProps?.get(TableProps.propNames.isEditingMode) || false;
-	const selectedRows = tableProps?.get(TableProps.propNames.selectedRows) || null;
-	const selectedRowsChanged = tableProps?.get(TableProps.propNames.selectedRowsChanged) || null;
-	const constrained = tableProps?.get(TableProps.propNames.constrained) || false;
-
-	customClasses["tableHeader"] = tableProps?.getStyle(TableProps.ruleNames.tableHeader) || null;
-	customClasses["tableRow"] = tableProps?.getStyle(TableProps.ruleNames.tableRow) || null;
-	customClasses["tableCell"] = tableProps?.getStyle(TableProps.ruleNames.tableCell) || null;
-	customClasses["headerCell"] = tableProps?.getStyle(TableProps.ruleNames.headerCell) || null;
-	customClasses["tableContainer"] = tableProps?.getStyle(TableProps.ruleNames.tableContainer) || null;
-	customClasses["container"] = tableProps?.getStyle(TableProps.ruleNames.container) || null;
-	customClasses["table"] = tableProps?.getStyle(TableProps.ruleNames.table) || null;
-
-	if ((selectedRows && !selectedRowsChanged) || (!selectedRows && selectedRowsChanged))
-		throw new Error("Both 'selectedRows' and 'selectedRowsChanged' need to be defined if one of them is.");
-
-	const refScrolled = useRef();
-
-	const [scrolled, setScrolled] = useState(0);
-	const [tableSize, setTableSize] = useState({ width: 0, height: 0 });
-
-	const [selectedNumber, tableSelectionStatus, selectionMethods] = useTableSelection(
-		rows,
-		selectedRows,
-		selectedRowsChanged,
+	const [scrollbarViewState, updateScrollbarViewState] = useViewState(props.tableName + "ScrollbarPosition");
+	const [scrollbar, setScrollbarPosition] = useState(scrollbarViewState.scrollBarPosition);
+
+	useEffect(
+		() => {
+			const handler = setTimeout(() => {
+				updateScrollbarViewState("scrollBarPosition", scrollbar);
+			}, 500);
+			return () => {
+				clearTimeout(handler);
+			};
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[scrollbar],
 	);
 
-	const classes = useStyles({
-		withoutTopBorder,
-		selectMode,
-		stickyHeader,
-		scrolled,
-		onRowClick,
-	});
+	const saveScrollBarPosition = evt => {
+		setScrollbarPosition(evt.target.scrollTop);
+	};
 
 	useEffect(() => {
-		const handleResize = () => {
-			if (refScrolled.current.offsetHeight < refScrolled.current.scrollHeight)
-				setScrolled(refScrolled.current.offsetWidth - refScrolled.current.clientWidth);
-			else setScrolled(0);
-		};
+		if (scrollbarViewState.scrollBarPosition > 0) {
+			// The Table component usually display the provided list ASAP however it can happen that the Table is not fully rendered with its items when we attempt to change the scrollTop value.
+			// The timer should ensure that the list is rendered before attempting to change the scrollTop if the first attempt was not able to set the scroll position
+			// 		This edge case was found using these steps:
+			//          * Create an organization with 50+ customers
+			//          * Go to the customer section of the organization and scroll down a bit
+			//          * Wait 1 second for the scroll position to be stored
+			//          * Go to the organization list (click on the tab)
+			//          * Go back to the organization (its tab should still be visible)
+			//          * We expect the customer list to remember its scroll position but it wasn't the case
+			//
+			// In addition to the timer, the tableName was added as a dependency to force the effect to execute again when it changes.
+			// The tableName value in the organization's customers page is composed with 2 parts: "OrganizationCustomers_" + organizationId. This allows 2 organizations to use different scroll position for their respective customers pages.
+			// When the page first load, it is possible for organizationId to not yet be defined (strange but it's routing related) and because of that this useEffect was executed but with an unknown scrollBarPosition.
+			// The organizationId will be set on the next render and this useEffect needs be executed again to have the list scrolled to the correct position.
+
+			const previousScrollTop = ref.current.scrollTop;
+			ref.current.scrollTop = scrollbarViewState.scrollBarPosition;
+
+			// Note AD20250714: I was not able to create a test for the code below because it needs to run in a real browser otherwise the behavior with scrollTop does not match reality
+			/* istanbul ignore if */
+			if (ref.current.scrollTop === previousScrollTop) {
+				setTimeout(() => {
+					// using a timer to give a chance to the UI to populate the list
+					ref.current.scrollTop = scrollbarViewState.scrollBarPosition;
+				}, 250);
+			}
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [props.tableName]); // forcing this effect to run again when the tableName changes
 
-		handleResize();
+	return <DefaultFullTable {...props} ref={ref} saveScrollBarPosition={saveScrollBarPosition} />;
+});
 
-		window.addEventListener("resize", handleResize);
+const Table = React.forwardRef(
+	({ tableInfo, headers, rows, scrollLoader, latestPage, pageLength, placeholder, tableProps, context }, ref) => {
+		if (isTableProps(tableProps) === false) {
+			throw new TypeError("tableProps property is not of type TableProps");
+		}
 
-		/* istanbul ignore next */
-		return () => window.removeEventListener("resize", handleResize);
-	}, [refScrolled, tableSize.width, tableSize.height]);
-
-	const tableHeaders = buildTableHeaders(
-		headers,
-		classes,
-		customClasses,
-		selectMode,
-		tableSelectionStatus,
-		selectionMethods,
-	);
+		const customClasses = tableProps?.get(TableProps.propNames.classes) || {};
+		const selectMode = tableProps?.get(TableProps.propNames.selectMode) || false;
+		const stickyHeader = tableProps?.get(TableProps.propNames.stickyHeader) || false;
+		const withoutTopBorder = tableProps?.get(TableProps.propNames.withoutTopBorder) || false;
+		const onRowClick = tableProps?.get(TableProps.propNames.onRowClick) || null;
+		const deepPropsComparation = tableProps?.get(TableProps.propNames.deepPropsComparation) || false;
+		const isEditingMode = tableProps?.get(TableProps.propNames.isEditingMode) || false;
+		const selectedRows = tableProps?.get(TableProps.propNames.selectedRows) || null;
+		const selectedRowsChanged = tableProps?.get(TableProps.propNames.selectedRowsChanged) || null;
+		const constrained = tableProps?.get(TableProps.propNames.constrained) || false;
+		const tableName = tableProps?.get(TableProps.propNames.tableName) || null;
+		const saveScrollbarPosition = tableProps?.get(TableProps.propNames.saveScrollbarPosition) || false;
+
+		customClasses["tableHeader"] = tableProps?.getStyle(TableProps.ruleNames.tableHeader) || null;
+		customClasses["tableRow"] = tableProps?.getStyle(TableProps.ruleNames.tableRow) || null;
+		customClasses["tableCell"] = tableProps?.getStyle(TableProps.ruleNames.tableCell) || null;
+		customClasses["headerCell"] = tableProps?.getStyle(TableProps.ruleNames.headerCell) || null;
+		customClasses["tableContainer"] = tableProps?.getStyle(TableProps.ruleNames.tableContainer) || null;
+		customClasses["container"] = tableProps?.getStyle(TableProps.ruleNames.container) || null;
+		customClasses["table"] = tableProps?.getStyle(TableProps.ruleNames.table) || null;
+
+		if ((selectedRows && !selectedRowsChanged) || (!selectedRows && selectedRowsChanged))
+			throw new Error("Both 'selectedRows' and 'selectedRowsChanged' need to be defined if one of them is.");
+
+		const refScrolled = useRef();
+
+		useImperativeHandle(ref, () => ({
+			scrollToTop: () => {
+				if (refScrolled.current.scrollTop > 0) {
+					refScrolled.current.scrollTop = 0;
+				}
+			},
+		}));
+
+		const [scrolled, setScrolled] = useState(0);
+		const [tableSize, setTableSize] = useState({ width: 0, height: 0 });
+
+		const [selectedNumber, tableSelectionStatus, selectionMethods] = useTableSelection(
+			rows,
+			selectedRows,
+			selectedRowsChanged,
+		);
 
-	const tableRows = buildTableRows(
-		rows,
-		classes,
-		customClasses,
-		selectMode,
-		onRowClick,
-		selectionMethods,
-		deepPropsComparation,
-		context,
-		isEditingMode,
-	);
+		const classes = useStyles({
+			withoutTopBorder,
+			selectMode,
+			stickyHeader,
+			scrolled,
+			onRowClick,
+		});
+
+		useEffect(() => {
+			const handleResize = () => {
+				if (refScrolled.current.offsetHeight < refScrolled.current.scrollHeight)
+					setScrolled(refScrolled.current.offsetWidth - refScrolled.current.clientWidth);
+				else setScrolled(0);
+			};
+
+			handleResize();
+
+			window.addEventListener("resize", handleResize);
+
+			/* istanbul ignore next */
+			return () => window.removeEventListener("resize", handleResize);
+		}, [refScrolled, tableSize.width, tableSize.height]);
+
+		const tableHeaders = buildTableHeaders(
+			headers,
+			classes,
+			customClasses,
+			selectMode,
+			tableSelectionStatus,
+			selectionMethods,
+		);
 
-	const stickerTableHeader =
-		stickyHeader === true ? (
-			<StickerTableHeader selectMode={selectMode} classes={classes} tableHeaders={tableHeaders} />
-		) : null;
+		const tableRows = buildTableRows(
+			rows,
+			classes,
+			customClasses,
+			selectMode,
+			onRowClick,
+			selectionMethods,
+			deepPropsComparation,
+			context,
+			isEditingMode,
+		);
 
-	/* istanbul ignore next */
-	const onResize = useCallback((width, height) => setTableSize({ width: width, height: height }), [setTableSize]);
+		const stickerTableHeader =
+			stickyHeader === true ? (
+				<StickerTableHeader selectMode={selectMode} classes={classes} tableHeaders={tableHeaders} />
+			) : null;
 
-	return (
-		<TableContainer className={classNames(classes.container, customClasses.container)}>
-			{tableInfo}
-			{stickerTableHeader}
-			<FullTable
-				ref={refScrolled}
-				classes={classes}
-				customClasses={customClasses}
-				constrained={constrained}
-				onResize={onResize}
-				selectedNumber={selectedNumber}
-				scrollLoader={scrollLoader}
-				tableHeaders={tableHeaders}
-				dataRows={rows}
-				tableRows={tableRows}
-				stickyHeader={stickyHeader}
-				latestPage={latestPage}
-				pageLength={pageLength}
-				placeholder={placeholder}
-				deepPropsComparation={deepPropsComparation}
-				isEditingMode={isEditingMode}
-				context={context}
-			/>
-		</TableContainer>
-	);
-};
+		/* istanbul ignore next */
+		const onResize = useCallback((width, height) => setTableSize({ width: width, height: height }), [setTableSize]);
+
+		return (
+			<TableContainer className={classNames(classes.container, customClasses.container)}>
+				{tableInfo}
+				{stickerTableHeader}
+				<FullTable
+					ref={refScrolled}
+					classes={classes}
+					customClasses={customClasses}
+					constrained={constrained}
+					onResize={onResize}
+					selectedNumber={selectedNumber}
+					scrollLoader={scrollLoader}
+					tableHeaders={tableHeaders}
+					dataRows={rows}
+					tableRows={tableRows}
+					stickyHeader={stickyHeader}
+					latestPage={latestPage}
+					pageLength={pageLength}
+					placeholder={placeholder}
+					deepPropsComparation={deepPropsComparation}
+					isEditingMode={isEditingMode}
+					context={context}
+					tableName={tableName}
+					saveScrollbarPosition={saveScrollbarPosition}
+				/>
+			</TableContainer>
+		);
+	},
+);
 
 export default React.memo(
 	Table,

package/src/components/MaterialUI/DataDisplay/Table.test.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import ReactDOM from "react-dom";
 import { act } from "react-dom/test-utils";
 import sinon from "sinon";
@@ -19,6 +19,8 @@ import ResizeDetector from "react-resize-detector";
 import CheckboxMui from "../Inputs/Checkbox";
 import { cloneDeep } from "lodash";
 import TooltippedTypography from "./TooltippedElements/TooltippedTypography";
+import Immutable from "immutable";
+import { TestWrapper } from "../../../utils/testUtils";
 
 const TestComp = ({ classToTest, styleProps }) => {
 	const classes = useStyles({ ...styleProps });
@@ -507,6 +509,22 @@ describe("Table", () => {
 		{ fieldName: "a2", label: headerLabels.column2 },
 	];
 
+	let store, state;
+
+	beforeEach(() => {
+		state = Immutable.fromJS({
+			modules: {
+				tree: {},
+			},
+			view: {},
+		});
+		store = {
+			subscribe: () => {},
+			getState: () => state,
+			dispatch: sinon.spy().named("dispatch"),
+		};
+	});
+
 	it("Fails if tableProps has wrong type", () => {
 		ignoreConsoleError(() => {
 			const component = <Table rows={[]} headers={[]} tableProps="Wrong type" />;
@@ -1113,4 +1131,231 @@ describe("Table", () => {
 
 		expect(style.customClass, "to equal", "specialClass");
 	});
+
+	it("Table throws if saveScrollbar is true but tableName is falsy", () => {
+		const { headers, rows } = buildHeaderAndRowFromConfig(config, elements);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.tableName, null);
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+
+		ignoreConsoleError(() => {
+			const component = <Table rows={rows} headers={headers} tableProps={tableProps} />;
+			expect(() => mount(component), "to throw a", Error).then(error => {
+				expect(error, "to have message", "prop 'tableName' is required if 'saveScrollbarPosition' is set to true.");
+			});
+		});
+	});
+
+	it("handle scrolling event with save ", () => {
+		const { headers, rows } = buildHeaderAndRowFromConfig(config, elements);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.selectMode, true);
+		tableProps.set(TableProps.propNames.tableName, "test");
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+
+		const scrollLoader = sinon.spy().named("scrollLoader");
+
+		const component = (
+			<TestWrapper provider={{ store }}>
+				<Table
+					rows={rows}
+					headers={headers}
+					pageLength={2}
+					latestPage={1}
+					tableProps={tableProps}
+					scrollLoader={scrollLoader}
+				/>
+			</TestWrapper>
+		);
+
+		const mountedComponent = mount(component);
+
+		const scrollEvent = document.createEvent("MouseEvents");
+		scrollEvent.initEvent("scroll", true, false);
+
+		const table = mountedComponent.find(TableMui);
+
+		table.simulate("scroll", {
+			target: { scrollHeight: 1000, scrollTop: 40, offsetHeight: 100 },
+		});
+
+		expect(scrollLoader, "was not called");
+
+		table.simulate("scroll", {
+			target: { scrollHeight: 1000, scrollTop: 850, offsetHeight: 100 },
+		});
+
+		return expect(scrollLoader, "to have calls satisfying", [{ args: [2] }])
+			.then(() => new Promise(r => setTimeout(r, 600)))
+			.then(() =>
+				expect(store.dispatch, "to have calls satisfying", [
+					{
+						args: [
+							{
+								type: "VIEW_STATE_SET_FIELD",
+								payload: {
+									name: "testScrollbarPosition",
+									field: "scrollBarPosition",
+									value: 850,
+								},
+							},
+						],
+					},
+				]),
+			);
+	});
+
+	it("should initialize scrollbar to saved state", () => {
+		const { headers, rows } = buildHeaderAndRowFromConfig(config, elements);
+
+		state = state.setIn(
+			["view", "testScrollbarPosition"],
+			Immutable.fromJS({
+				scrollBarPosition: 800,
+			}),
+		);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.selectMode, true);
+		tableProps.set(TableProps.propNames.tableName, "test");
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+
+		const scrollLoader = sinon.spy().named("scrollLoader");
+
+		const component = (
+			<TestWrapper provider={{ store }}>
+				<Table
+					rows={rows}
+					headers={headers}
+					pageLength={2}
+					latestPage={1}
+					tableProps={tableProps}
+					scrollLoader={scrollLoader}
+				/>
+			</TestWrapper>
+		);
+
+		const mountedComponent = mount(component);
+		const scrollableDiv = mountedComponent.find({ "data-qa": "scrollable-table-div" });
+		expect(scrollableDiv?.getElement()?.ref?.current?.scrollTop, "to equal", 800);
+	});
+
+	it("should scroll to top", () => {
+		const { headers, rows } = buildHeaderAndRowFromConfig(config, elements);
+
+		state = state.setIn(
+			["view", "testScrollbarPosition"],
+			Immutable.fromJS({
+				scrollBarPosition: 800,
+			}),
+		);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.selectMode, true);
+		tableProps.set(TableProps.propNames.tableName, "test");
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+
+		const scrollLoader = sinon.spy().named("scrollLoader");
+
+		const CustomTable = () => {
+			const ref = useRef(null);
+
+			const clickToTop = () => {
+				ref.current && ref.current.scrollToTop();
+			};
+
+			return (
+				<>
+					<input type="button" onClick={clickToTop} data-qa="scroll-btn" />
+					<Table
+						ref={ref}
+						rows={rows}
+						headers={headers}
+						pageLength={2}
+						latestPage={1}
+						tableProps={tableProps}
+						scrollLoader={scrollLoader}
+					/>
+				</>
+			);
+		};
+
+		const component = (
+			<TestWrapper provider={{ store }}>
+				<CustomTable />
+			</TestWrapper>
+		);
+
+		const mountedComponent = mount(component);
+		const scrollableDiv = mountedComponent.find({ "data-qa": "scrollable-table-div" });
+		expect(scrollableDiv?.getElement()?.ref?.current?.scrollTop, "to equal", 800);
+
+		const scrollBtn = mountedComponent.find({ "data-qa": "scroll-btn" });
+		scrollBtn.simulate("click");
+
+		expect(scrollableDiv?.getElement()?.ref?.current?.scrollTop, "to equal", 0);
+	});
+
+	it("should not scroll to top because already at the top", () => {
+		const { headers, rows } = buildHeaderAndRowFromConfig(config, elements);
+
+		state = state.setIn(
+			["view", "testScrollbarPosition"],
+			Immutable.fromJS({
+				scrollBarPosition: 0,
+			}),
+		);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.selectMode, true);
+		tableProps.set(TableProps.propNames.tableName, "test");
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+
+		const scrollLoader = sinon.spy().named("scrollLoader");
+
+		const CustomTable = () => {
+			const ref = useRef(null);
+
+			const clickToTop = () => {
+				ref.current && ref.current.scrollToTop();
+			};
+
+			return (
+				<>
+					<input type="button" onClick={clickToTop} data-qa="scroll-btn" />
+					<Table
+						ref={ref}
+						rows={rows}
+						headers={headers}
+						pageLength={2}
+						latestPage={1}
+						tableProps={tableProps}
+						scrollLoader={scrollLoader}
+					/>
+				</>
+			);
+		};
+
+		const component = (
+			<TestWrapper provider={{ store }}>
+				<CustomTable />
+			</TestWrapper>
+		);
+
+		const mountedComponent = mount(component);
+		const scrollableDiv = mountedComponent.find({ "data-qa": "scrollable-table-div" });
+		expect(scrollableDiv?.getElement()?.ref?.current?.scrollTop, "to equal", 0);
+
+		const scrollBtn = mountedComponent.find({ "data-qa": "scroll-btn" });
+		scrollBtn.simulate("click");
+
+		expect(scrollableDiv?.getElement()?.ref?.current?.scrollTop, "to equal", 0);
+	});
 });

package/src/components/MaterialUI/DataDisplay/TableProps.js

@@ -12,6 +12,8 @@ class TableProps extends ComponentProps {
 		selectedRows: "selectedRows",
 		selectedRowsChanged: "selectedRowsChanged",
 		constrained: "constrained",
+		tableName: "tableName",
+		saveScrollbarPosition: "saveScrollbarPosition",
 	};
 
 	static ruleNames = {
@@ -37,6 +39,8 @@ class TableProps extends ComponentProps {
 		this.componentProps.set(this.constructor.propNames.selectedRows, null);
 		this.componentProps.set(this.constructor.propNames.selectedRowsChanged, null);
 		this.componentProps.set(this.constructor.propNames.constrained, false);
+		this.componentProps.set(this.constructor.propNames.tableName, null);
+		this.componentProps.set(this.constructor.propNames.saveScrollbarPosition, null);
 
 		this.componentClasses.set(this.constructor.ruleNames.tableHeader, null);
 		this.componentClasses.set(this.constructor.ruleNames.tableRow, null);

package/src/components/MaterialUI/DataDisplay/TableProps.test.js

@@ -30,6 +30,8 @@ describe("TableProps Props", () => {
 			"selectedRows",
 			"selectedRowsChanged",
 			"constrained",
+			"tableName",
+			"saveScrollbarPosition",
 		];
 
 		const ruleNames = ["tableHeader", "tableRow", "tableCell", "headerCell", "tableContainer", "container", "table"];