implements #756 | fixes row initial render (#760)

Author: jbetancur

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-data-table-component",
-  "version": "7.0.0-alpha-4",
+  "version": "7.0.0-alpha-5",
   "description": "A declarative react based data table",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -52,17 +52,17 @@
     "@types/jest": "^26.0.20",
     "@types/lodash-es": "^4.17.4",
     "@types/lodash.orderby": "^4.6.6",
-    "@types/node": "^14.14.21",
+    "@types/node": "^14.14.22",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/styled-components": "^5.1.7",
-    "@typescript-eslint/eslint-plugin": "^4.13.0",
-    "@typescript-eslint/parser": "^4.13.0",
+    "@typescript-eslint/eslint-plugin": "^4.14.0",
+    "@typescript-eslint/parser": "^4.14.0",
     "axios": "^0.21.1",
     "babel-eslint": "^10.1.0",
     "codecov": "^3.8.1",
     "eslint": "^7.18.0",
-    "eslint-config-prettier": "^7.1.0",
+    "eslint-config-prettier": "^7.2.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^24.1.3",
@@ -82,14 +82,14 @@
     "react-app-polyfill": "^2.0.0",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.36.2",
+    "rollup": "^2.37.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.29.0",
     "rollup-plugin-visualizer": "^4.2.0",
     "styled-components": "^5.0.1",
-    "stylelint": "^13.8.0",
+    "stylelint": "^13.9.0",
     "stylelint-config-recommended": "^3.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",

src/DataTable/DataTable.tsx

@@ -121,18 +121,25 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
 		defaultSortFieldId,
 	]);
 
-	const initialState: TableState<T> = {
-		allSelected: false,
-		rows: [],
-		selectedCount: 0,
-		selectedRows: [],
-		selectedColumn: defaultSortColumn || { name: '' },
-		sortDirection: defaultSortDirection,
-		currentPage: paginationDefaultPage,
-		rowsPerPage: paginationPerPage,
-		selectedRowsFlag: false,
-		contextMessage: defaultProps.contextMessage,
-	};
+	// Run once
+	const initialState: TableState<T> = React.useMemo(
+		() => ({
+			allSelected: false,
+			rows: defaultSortColumn?.selector
+				? sort(data, defaultSortColumn.selector, defaultSortDirection, sortFunction)
+				: data,
+			selectedCount: 0,
+			selectedRows: [],
+			selectedColumn: defaultSortColumn || { name: '' },
+			sortDirection: defaultSortDirection,
+			currentPage: paginationDefaultPage,
+			rowsPerPage: paginationPerPage,
+			selectedRowsFlag: false,
+			contextMessage: defaultProps.contextMessage,
+		}),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[],
+	);
 
 	const [
 		{ rowsPerPage, rows, currentPage, selectedRows, allSelected, selectedCount, selectedColumn, sortDirection },
@@ -148,6 +155,18 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
 	const expandableRowsComponentMemo = React.useMemo(() => expandableRowsComponent, [expandableRowsComponent]);
 	const wrapperProps = React.useMemo(() => ({ ...(direction !== 'auto' && { dir: direction }) }), [direction]);
 
+	const calculatedRows = React.useMemo(() => {
+		if (pagination && !paginationServer) {
+			// when using client-side pagination we can just slice the rows set
+			const lastIndex = currentPage * rowsPerPage;
+			const firstIndex = lastIndex - rowsPerPage;
+
+			return rows.slice(firstIndex, lastIndex);
+		}
+
+		return rows;
+	}, [currentPage, pagination, paginationServer, rows, rowsPerPage]);
+
 	const handleSort = (action: SortAction<T>) => {
 		dispatch(action);
 	};
@@ -199,17 +218,21 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
 		return rows.length > 0 && !progressPending;
 	};
 
-	const calculatedRows = React.useMemo(() => {
-		if (pagination && !paginationServer) {
-			// when using client-side pagination we can just slice the rows set
-			const lastIndex = currentPage * rowsPerPage;
-			const firstIndex = lastIndex - rowsPerPage;
+	const showHeader = () => {
+		if (noHeader) {
+			return false;
+		}
 
-			return rows.slice(firstIndex, lastIndex);
+		if (title) {
+			return true;
 		}
 
-		return rows;
-	}, [currentPage, pagination, paginationServer, rows, rowsPerPage]);
+		if (actions) {
+			return true;
+		}
+
+		return false;
+	};
 
 	// recalculate the pagination and currentPage if the rows length changes
 	if (pagination && !paginationServer && rows.length > 0 && calculatedRows.length === 0) {
@@ -278,7 +301,7 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
 
 	return (
 		<ThemeProvider theme={currentTheme}>
-			{!noHeader && (
+			{showHeader() && (
 				<TableHeader
 					title={title}
 					actions={actions}

src/DataTable/TableHeader.tsx

@@ -48,7 +48,7 @@ type TableHeaderProps = {
 
 const TableHeader = ({
 	title,
-	actions = [],
+	actions = null,
 	contextMessage,
 	contextActions,
 	contextComponent,
@@ -58,7 +58,7 @@ const TableHeader = ({
 }: TableHeaderProps): JSX.Element => (
 	<TableHeaderStyle className="rdt_TableHeader" role="heading" aria-level={1}>
 		<Title>{title}</Title>
-		<Actions>{actions}</Actions>
+		{actions && <Actions>{actions}</Actions>}
 
 		{showMenu && (
 			<ContextMenu

src/DataTable/__tests__/DataTable.test.tsx

@@ -1853,6 +1853,13 @@ describe('DataTable::Header', () => {
 		expect(container.firstChild).toMatchSnapshot();
 	});
 
+	test('header should not display with no title', () => {
+		const mock = dataMock();
+		const { container } = render(<DataTable data={mock.data} columns={mock.columns} />);
+
+		expect(container.firstChild).toMatchSnapshot();
+	});
+
 	test('should render header actions when they are provided', () => {
 		const mock = dataMock();
 		const { container } = render(