refactor fixedHeader

README.md

@@ -169,8 +169,6 @@ When the breakpoint is reached the column will be hidden. These are the built-in
 | disabled | bool | no | false | disables the Table section |
 | onRowClicked | func | no | | callback to access the row, event on row click. <br /> <br /><br />**Note** that if you are using custom cells (`column[].cell`), you will need to apply the `data-tag="allowRowEvents"` to the innermost element or on the elements you want to propagate the `onRowClicked` event to. |
 | onRowDoubleClicked | func | no | | callback to access the row, event on row double click. <br /><br />**Note** that if you are using custom cells (`column[].cell`), you will need to apply the `data-tag="allowRowEvents"` to the innermost element or on the elements you want to propagate the `onRowDoubleClicked` event to. |
-| overflowY | bool | no | false | if a table is responsive, items such as layovers/menus/dropdowns will be clipped on the last row(s) due to to [overflow-x-y behavior](https://www.brunildo.org/test/Overflowxy2.html) - setting this value ensures there is invisible space below the table to prevent "clipping". However, if possible, the **correct approach is to use menus/layovers/dropdowns that support smart positioning**. **If used, the table parent element must have a fixed `height` or `height: 100%`**. |
-| overflowYOffset | string | no | 250px | used with overflowY to "fine tune" the offset |
 | dense           | bool   | no | false | compacts the row height. can be overridden via theming `rows.denseHeight`. <br /><br />**Note** that if any custom elements exceed the dense height then the row will only compact to the tallest element any of your cells |
 | noTableHead | bool | no | false | hides the the sort columns and titles (TableHead) - this will obviously negate sorting |
 | persistTableHead | bool | no |  | Show the table head (columns) even when `progressPending` is true. <br /><br />**Note** that the `noTableHead` will always hide the table head (columns) even when using  `persistTableHead` |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-data-table-component",
-  "version": "7.0.0-rc5",
+  "version": "7.0.0-rc6",
   "description": "A declarative react based data table",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -93,7 +93,7 @@
     "stylelint-config-recommended": "^5.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
-    "ts-jest": "^27.0.4",
+    "ts-jest": "^27.0.5",
     "typescript": "^4.3.5"
   },
   "dependencies": {

src/DataTable/DataTable.tsx

@@ -63,8 +63,6 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
 		paginationComponent = defaultProps.paginationComponent,
 		paginationComponentOptions = defaultProps.paginationComponentOptions,
 		responsive = defaultProps.responsive,
-		overflowY = defaultProps.overflowY,
-		overflowYOffset = defaultProps.overflowYOffset,
 		progressPending = defaultProps.progressPending,
 		progressComponent = defaultProps.progressComponent,
 		persistTableHead = defaultProps.persistTableHead,
@@ -321,16 +319,16 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
 
 			<ResponsiveWrapper
 				responsive={responsive}
-				overflowYOffset={overflowYOffset}
-				overflowY={overflowY}
+				fixedHeader={fixedHeader}
+				fixedHeaderScrollHeight={fixedHeaderScrollHeight}
 				{...wrapperProps}
 			>
 				<TableWrapper>
 					{progressPending && !persistTableHead && <ProgressWrapper>{progressComponent}</ProgressWrapper>}
 
 					<Table disabled={disabled} className="rdt_Table" role="table">
 						{showTableHead() && (
-							<TableHead className="rdt_TableHead" role="rowgroup">
+							<TableHead className="rdt_TableHead" role="rowgroup" fixedHeader={fixedHeader}>
 								<TableHeadRow className="rdt_TableHeadRow" role="row" dense={dense}>
 									{selectableRows &&
 										(showSelectAll ? (
@@ -382,14 +380,7 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
 						{progressPending && persistTableHead && <ProgressWrapper>{progressComponent}</ProgressWrapper>}
 
 						{!progressPending && rows.length > 0 && (
-							<TableBody
-								fixedHeader={fixedHeader}
-								fixedHeaderScrollHeight={fixedHeaderScrollHeight}
-								hasOffset={overflowY}
-								offset={overflowYOffset}
-								className="rdt_TableBody"
-								role="rowgroup"
-							>
+							<TableBody className="rdt_TableBody" role="rowgroup">
 								{tableRows.map((row, i) => {
 									const id = isEmpty(row[keyField]) ? i : row[keyField];
 									const selected = isRowSelected(row, selectedRows, keyField);

src/DataTable/ResponsiveWrapper.tsx

@@ -8,28 +8,27 @@ import styled, { css } from 'styled-components';
 
 const ResponsiveWrapper = styled.div<{
 	responsive: boolean;
-	overflowYOffset: string;
-	overflowY: boolean;
+	fixedHeader?: boolean;
+	fixedHeaderScrollHeight?: string;
 }>`
 	position: relative;
 	width: 100%;
 	border-radius: inherit;
-	${({ responsive }) =>
+	${({ responsive, fixedHeader }) =>
 		responsive &&
 		css`
 			overflow-x: auto;
 
-			// prevents vertical scrolling in firefox
-			overflow-y: hidden;
+			// hidden prevents vertical scrolling in firefox when fixedHeader is disabled
+			overflow-y: ${fixedHeader ? 'auto' : 'hidden'};
 			min-height: 0;
 		`};
-	${({ overflowY, overflowYOffset, responsive }) =>
-		overflowY &&
-		responsive &&
-		overflowYOffset &&
+
+	${({ fixedHeader = false, fixedHeaderScrollHeight = '100vh' }) =>
+		fixedHeader &&
 		css`
-			padding-bottom: ${overflowYOffset};
-			margin-bottom: -${overflowYOffset};
+			max-height: ${fixedHeaderScrollHeight};
+			-webkit-overflow-scrolling: touch;
 		`};
 `;
 

src/DataTable/TableBody.tsx

@@ -1,20 +1,8 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
-const TableBody = styled.div<{
-	fixedHeader?: boolean;
-	fixedHeaderScrollHeight?: string;
-	hasOffset?: boolean;
-	offset?: string;
-}>`
+const TableBody = styled.div`
 	display: flex;
 	flex-direction: column;
-	${({ fixedHeader = false, hasOffset = false, offset = 0, fixedHeaderScrollHeight = '100vh' }) =>
-		fixedHeader &&
-		css`
-			max-height: ${hasOffset ? `calc(${fixedHeaderScrollHeight} - ${offset})` : fixedHeaderScrollHeight};
-			overflow-y: auto;
-			-webkit-overflow-scrolling: touch;
-		`};
 `;
 
 export default TableBody;

src/DataTable/TableHead.tsx

@@ -1,8 +1,18 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-const TableHead = styled.div`
+const fixedCSS = css`
+	position: sticky;
+	position: -webkit-sticky; /* Safari */
+	top: 0;
+	z-index: 1;
+`;
+
+const TableHead = styled.div<{
+	fixedHeader?: boolean;
+}>`
 	display: flex;
-	text-align: left;
+	width: 100%;
+	${({ fixedHeader }) => fixedHeader && fixedCSS};
 	${({ theme }) => theme.head.style};
 `;
 

src/DataTable/__tests__/DataTable.test.tsx

@@ -562,15 +562,6 @@ describe('DataTable::responsive', () => {
 
 		expect(container.firstChild).toMatchSnapshot();
 	});
-
-	test('should not apply overFlowY without an overflowYOffset or not responsive', () => {
-		const mock = dataMock();
-		const { container } = render(
-			<DataTable data={mock.data} columns={mock.columns} responsive overflowY overflowYOffset="250px" />,
-		);
-
-		expect(container.firstChild).toMatchSnapshot();
-	});
 });
 
 describe('DataTable::sorting', () => {
@@ -2142,22 +2133,6 @@ describe('DataTable::fixedHeader', () => {
 
 		expect(container.firstChild).toMatchSnapshot();
 	});
-
-	test('should render correctly when fixedHeader with an offset', () => {
-		const mock = dataMock();
-		const { container } = render(<DataTable data={mock.data} columns={mock.columns} fixedHeader overflowY />);
-
-		expect(container.firstChild).toMatchSnapshot();
-	});
-
-	test('should render correctly when fixedHeader with an offset with a value', () => {
-		const mock = dataMock();
-		const { container } = render(
-			<DataTable data={mock.data} columns={mock.columns} fixedHeader overflowY offset="100px" />,
-		);
-
-		expect(container.firstChild).toMatchSnapshot();
-	});
 });
 
 describe('DataTable::striped', () => {