fix: only allow freezed columns for non-expandable tables

cloudanswers · Aug 8, 2024 · a3d13d5 · a3d13d5
1 parent cace3e7
commit a3d13d5
Showing 1 changed file with 18 additions and 17 deletions.
diff --git a/src/DataTable/DataTable.tsx b/src/DataTable/DataTable.tsx
@@ -123,7 +123,7 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 		footer = defaultProps.footer,
 		currentSortColumnId = defaultProps.currentSortColumnId,
 		currentSortDirection = defaultProps.currentSortDirection,
-		// isInnerTable = defaultProps.isInnerTable,
+		isInnerTable = defaultProps.isInnerTable,
 	} = props;
 
 	const {
@@ -139,16 +139,16 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 	} = useColumns(columns, onColumnOrderChange, defaultSortFieldId, defaultSortAsc);
 
 	// Find index of last freezed column
-	// const index = React.useMemo(
-	// 	() =>
-	// 		tableColumns.reduce((i, column) => {
-	// 			if (column.freeze) {
-	// 				i += 1;
-	// 			}
-	// 			return i;
-	// 		}, 0),
-	// 	[tableColumns],
-	// );
+	const index = React.useMemo(
+		() =>
+			tableColumns.reduce((i, column) => {
+				if (column.freeze) {
+					i += 1;
+				}
+				return i;
+			}, 0),
+		[tableColumns],
+	);
 
 	// const tableColumnsBasedOnTable = React.useMemo(() => {
 	// 	if (!isInnerTable) {
@@ -157,9 +157,9 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 	// 	return tableColumns.slice(0, index);
 	// }, [index, isInnerTable, tableColumns]);
 
-	// const freezedColumns = React.useMemo(() => {
-	// 	return tableColumns.slice(0, index);
-	// }, [index, tableColumns]);
+	const freezedColumns = React.useMemo(() => {
+		return tableColumns.slice(0, index);
+	}, [index, tableColumns]);
 
 	const [
 		{
@@ -597,13 +597,14 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 					</Wrapper>
 				</ResponsiveWrapper>
 
-				{/* {freezedColumns.length > 0 && (
+				{!expandableRows && !isInnerTable && freezedColumns.length > 0 && (
 					<div
 						style={{
 							position: 'absolute',
-							top: '200px',
+							top: 0,
 							left: 0,
 							maxWidth: '100%',
+							border: '1px solid black',
 						}}
 					>
 						<Table disabled={disabled} className="rdt_Table" role="table">
@@ -715,7 +716,7 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 						</Table>
 						{footer && <div>{footer}</div>}
 					</div>
-				)} */}
+				)}
 			</div>
 
 			{enabledPagination && (