bump version to 5.2

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "th2-rpt-viewer",
-	"version": "5.1.29",
+	"version": "5.2.6",
 	"description": "",
 	"main": "index.tsx",
 	"private": true,
@@ -27,7 +27,6 @@
 		"@types/react-text-mask": "^5.4.6",
 		"@types/recharts": "^1.8.16",
 		"@types/regenerator-runtime": "^0.13.1",
-		"axios": "^1.4.0",
 		"core-js": "^3.12.1",
 		"cross-env": "^6.0.3",
 		"fetch-retry": "^5.0.3",

src/components/event/tables/VerificationTable.tsx

@@ -189,6 +189,24 @@ const VerificationTableBase = (props: Props) => {
 		setState({ prevColumns, nextColumns });
 	};
 
+	const onNextColumnCick = () => {
+		const nextColumn = state.nextColumns[0]?.current;
+		if (!nextColumn || !rootRef.current) return;
+		const { left } = rootRef.current.getBoundingClientRect();
+		const columnRect = nextColumn.getBoundingClientRect();
+		rootRef.current.scrollLeft -= left - columnRect.left;
+		getHiddenColumns();
+	};
+
+	const onPrevColumnClick = () => {
+		const prevColumn = state.prevColumns[state.prevColumns.length - 1]?.current;
+		if (!prevColumn || !rootRef.current) return;
+		const { left } = rootRef.current.getBoundingClientRect();
+		const columnRect = prevColumn.getBoundingClientRect();
+		rootRef.current.scrollLeft -= left - columnRect.left;
+		getHiddenColumns();
+	};
+
 	const changeWidth = (index: number, value: number) => {
 		setState({
 			columnWidth: [
@@ -452,15 +470,42 @@ const VerificationTableBase = (props: Props) => {
 	if (!state.nodes.length) return null;
 	return (
 		<div className={rootClass}>
+			<div className='ver-table__nav'>
+				{state.prevColumns.length > 0 && (
+					<button
+						onClick={onPrevColumnClick}
+						className='ver-table__button'
+						style={{ gridArea: 'prev' }}>
+						<span className='ver-table__button-icon'>
+							<i className='ver-table__button-icon-prev'></i>
+						</span>
+						<span className='ver-table__button-label'>Previous</span>
+						<span className='ver-table__counter'>{state.prevColumns.length}</span>
+					</button>
+				)}
+				{state.nextColumns.length > 0 && (
+					<button
+						onClick={onNextColumnCick}
+						className='ver-table__button'
+						style={{ gridArea: 'next' }}>
+						<span className='ver-table__counter'>{state.nextColumns.length}</span>
+						<span className='ver-table__button-label'>Next</span>
+						<span className='ver-table__button-icon'>
+							<i className='ver-table__button-icon-next'></i>
+						</span>
+					</button>
+				)}
+			</div>
 			<div className='ver-table-header'>
 				<div className='ver-table-header-control'>
 					<span className='ver-table-header-control-button' onClick={onControlButtonClick(false)}>
 						Collapse
 					</span>
 					<span> | </span>
 					<span className='ver-table-header-control-button' onClick={onControlButtonClick(true)}>
-						Expand all groups
+						Expand
 					</span>
+					<span> all groups</span>
 					<span> | </span>
 					<span className='ver-table-header-control-button' onClick={resetWidth}>
 						Reset columns&#39; width