From 30341ea65aec6510a9558c2bfb6626e2f3b84fb4 Mon Sep 17 00:00:00 2001
From: Ashot Markosyan <mkdrm.one@gmail.com>
Date: Thu, 2 Feb 2023 07:46:48 -0800
Subject: [PATCH 1/2] feat(renderRow): add renderRow as props and render row
 through renderRow

---
 package.json                         |  3 +-
 src/DataTable/DataTable.tsx          | 92 +++++++++++++++-------------
 src/DataTable/defaultProps.tsx       |  1 +
 src/DataTable/types.ts               |  1 +
 stories/DataTable/RowLink.stories.js | 32 ++++++++++
 5 files changed, 84 insertions(+), 45 deletions(-)
 create mode 100644 stories/DataTable/RowLink.stories.js

diff --git a/package.json b/package.json
index c466c1fa..b3a81f86 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-data-table-component",
-  "version": "7.6.2",
+  "version": "7.6.3",
   "description": "A simple to use declarative react based data table",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -23,6 +23,7 @@
   "license": "Apache-2.0",
   "prepublish": "tsc",
   "scripts": {
+    "prepare": "npm run build",
     "prepublishOnly": "npm run build",
     "build:dev": "rollup -c rollup/rollup.config.dev.js -m",
     "build:umd": "rollup -c rollup/rollup.config.umd.js",
diff --git a/src/DataTable/DataTable.tsx b/src/DataTable/DataTable.tsx
index 2ba1924d..505e9afe 100644
--- a/src/DataTable/DataTable.tsx
+++ b/src/DataTable/DataTable.tsx
@@ -115,6 +115,7 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 		customStyles = defaultProps.customStyles,
 		direction = defaultProps.direction,
 		onColumnOrderChange = defaultProps.onColumnOrderChange,
+		renderRow = defaultProps.renderRow,
 		className,
 	} = props;
 
@@ -441,50 +442,53 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 									const expanderDisabled = !!(expandableRows && expandableRowDisabled && expandableRowDisabled(row));
 
 									return (
-										<Row
-											id={id}
-											key={id}
-											keyField={keyField}
-											data-row-id={id}
-											columns={tableColumns}
-											row={row}
-											rowCount={sortedData.length}
-											rowIndex={i}
-											selectableRows={selectableRows}
-											expandableRows={expandableRows}
-											expandableIcon={expandableIcon}
-											highlightOnHover={highlightOnHover}
-											pointerOnHover={pointerOnHover}
-											dense={dense}
-											expandOnRowClicked={expandOnRowClicked}
-											expandOnRowDoubleClicked={expandOnRowDoubleClicked}
-											expandableRowsComponent={expandableRowsComponent}
-											expandableRowsComponentProps={expandableRowsComponentProps}
-											expandableRowsHideExpander={expandableRowsHideExpander}
-											defaultExpanderDisabled={expanderDisabled}
-											defaultExpanded={expanderExpander}
-											expandableInheritConditionalStyles={expandableInheritConditionalStyles}
-											conditionalRowStyles={conditionalRowStyles}
-											selected={selected}
-											selectableRowsHighlight={selectableRowsHighlight}
-											selectableRowsComponent={selectableRowsComponent}
-											selectableRowsComponentProps={selectableRowsComponentProps}
-											selectableRowDisabled={selectableRowDisabled}
-											selectableRowsSingle={selectableRowsSingle}
-											striped={striped}
-											onRowExpandToggled={onRowExpandToggled}
-											onRowClicked={handleRowClicked}
-											onRowDoubleClicked={handleRowDoubleClicked}
-											onRowMouseEnter={handleRowMouseEnter}
-											onRowMouseLeave={handleRowMouseLeave}
-											onSelectedRow={handleSelectedRow}
-											draggingColumnId={draggingColumnId}
-											onDragStart={handleDragStart}
-											onDragOver={handleDragOver}
-											onDragEnd={handleDragEnd}
-											onDragEnter={handleDragEnter}
-											onDragLeave={handleDragLeave}
-										/>
+										renderRow(
+											row,
+											<Row
+												id={id}
+												key={id}
+												keyField={keyField}
+												data-row-id={id}
+												columns={tableColumns}
+												row={row}
+												rowCount={sortedData.length}
+												rowIndex={i}
+												selectableRows={selectableRows}
+												expandableRows={expandableRows}
+												expandableIcon={expandableIcon}
+												highlightOnHover={highlightOnHover}
+												pointerOnHover={pointerOnHover}
+												dense={dense}
+												expandOnRowClicked={expandOnRowClicked}
+												expandOnRowDoubleClicked={expandOnRowDoubleClicked}
+												expandableRowsComponent={expandableRowsComponent}
+												expandableRowsComponentProps={expandableRowsComponentProps}
+												expandableRowsHideExpander={expandableRowsHideExpander}
+												defaultExpanderDisabled={expanderDisabled}
+												defaultExpanded={expanderExpander}
+												expandableInheritConditionalStyles={expandableInheritConditionalStyles}
+												conditionalRowStyles={conditionalRowStyles}
+												selected={selected}
+												selectableRowsHighlight={selectableRowsHighlight}
+												selectableRowsComponent={selectableRowsComponent}
+												selectableRowsComponentProps={selectableRowsComponentProps}
+												selectableRowDisabled={selectableRowDisabled}
+												selectableRowsSingle={selectableRowsSingle}
+												striped={striped}
+												onRowExpandToggled={onRowExpandToggled}
+												onRowClicked={handleRowClicked}
+												onRowDoubleClicked={handleRowDoubleClicked}
+												onRowMouseEnter={handleRowMouseEnter}
+												onRowMouseLeave={handleRowMouseLeave}
+												onSelectedRow={handleSelectedRow}
+												draggingColumnId={draggingColumnId}
+												onDragStart={handleDragStart}
+												onDragOver={handleDragOver}
+												onDragEnd={handleDragEnd}
+												onDragEnter={handleDragEnter}
+												onDragLeave={handleDragLeave}
+											/>
+										)
 									);
 								})}
 							</Body>
diff --git a/src/DataTable/defaultProps.tsx b/src/DataTable/defaultProps.tsx
index 3908f027..b56f42e8 100644
--- a/src/DataTable/defaultProps.tsx
+++ b/src/DataTable/defaultProps.tsx
@@ -102,4 +102,5 @@ export const defaultProps = {
 	onSelectedRowsChange: noop,
 	onSort: noop,
 	onColumnOrderChange: noop,
+	renderRow: <T,>(row: T, rowContent: JSX.Element) => rowContent
 };
diff --git a/src/DataTable/types.ts b/src/DataTable/types.ts
index 66a7ecb9..ec4c12e0 100644
--- a/src/DataTable/types.ts
+++ b/src/DataTable/types.ts
@@ -114,6 +114,7 @@ export type TableProps<T> = {
 	 *  Shows and displays a header with a title
 	 *  */
 	title?: string | React.ReactNode;
+	renderRow?: (row: T, rowContent: JSX.Element) => JSX.Element;
 };
 
 export type TableColumnBase = {
diff --git a/stories/DataTable/RowLink.stories.js b/stories/DataTable/RowLink.stories.js
new file mode 100644
index 00000000..b2b70ddc
--- /dev/null
+++ b/stories/DataTable/RowLink.stories.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import data from '../constants/sampleMovieData';
+import DataTable from '../../src/index';
+
+const columns = [
+	{
+		name: 'Title',
+		selector: row => row.title,
+		sortable: true,
+	},
+	{
+		name: 'Director',
+		selector: row => row.director,
+		sortable: true,
+	},
+	{
+		name: 'Year',
+		selector: row => row.year,
+		sortable: true,
+	},
+];
+
+export const RowLink = () => {
+	return <DataTable title="Movie List" columns={columns} data={data} pagination renderRow={(row, rowContent) => <a href={`/${row.id}`} style={{display: 'block'}} target="_blank">{rowContent}</a>} />;
+};
+
+export default {
+	title: 'RowLink',
+	component: RowLink,
+	parameters: {
+	},
+};

From d81dde794f3d0bd35750c346e7af1d2fbad08e5d Mon Sep 17 00:00:00 2001
From: Ashot Markosyan <mkdrm.one@gmail.com>
Date: Tue, 28 Feb 2023 11:47:44 -0800
Subject: [PATCH 2/2] fix(lint): eslint and prettier

---
 src/DataTable/DataTable.tsx          | 94 ++++++++++++++--------------
 src/DataTable/defaultProps.tsx       |  2 +-
 stories/DataTable/RowLink.stories.js | 17 ++++-
 3 files changed, 61 insertions(+), 52 deletions(-)

diff --git a/src/DataTable/DataTable.tsx b/src/DataTable/DataTable.tsx
index 505e9afe..3af409f2 100644
--- a/src/DataTable/DataTable.tsx
+++ b/src/DataTable/DataTable.tsx
@@ -441,54 +441,52 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 									const expanderExpander = !!(expandableRows && expandableRowExpanded && expandableRowExpanded(row));
 									const expanderDisabled = !!(expandableRows && expandableRowDisabled && expandableRowDisabled(row));
 
-									return (
-										renderRow(
-											row,
-											<Row
-												id={id}
-												key={id}
-												keyField={keyField}
-												data-row-id={id}
-												columns={tableColumns}
-												row={row}
-												rowCount={sortedData.length}
-												rowIndex={i}
-												selectableRows={selectableRows}
-												expandableRows={expandableRows}
-												expandableIcon={expandableIcon}
-												highlightOnHover={highlightOnHover}
-												pointerOnHover={pointerOnHover}
-												dense={dense}
-												expandOnRowClicked={expandOnRowClicked}
-												expandOnRowDoubleClicked={expandOnRowDoubleClicked}
-												expandableRowsComponent={expandableRowsComponent}
-												expandableRowsComponentProps={expandableRowsComponentProps}
-												expandableRowsHideExpander={expandableRowsHideExpander}
-												defaultExpanderDisabled={expanderDisabled}
-												defaultExpanded={expanderExpander}
-												expandableInheritConditionalStyles={expandableInheritConditionalStyles}
-												conditionalRowStyles={conditionalRowStyles}
-												selected={selected}
-												selectableRowsHighlight={selectableRowsHighlight}
-												selectableRowsComponent={selectableRowsComponent}
-												selectableRowsComponentProps={selectableRowsComponentProps}
-												selectableRowDisabled={selectableRowDisabled}
-												selectableRowsSingle={selectableRowsSingle}
-												striped={striped}
-												onRowExpandToggled={onRowExpandToggled}
-												onRowClicked={handleRowClicked}
-												onRowDoubleClicked={handleRowDoubleClicked}
-												onRowMouseEnter={handleRowMouseEnter}
-												onRowMouseLeave={handleRowMouseLeave}
-												onSelectedRow={handleSelectedRow}
-												draggingColumnId={draggingColumnId}
-												onDragStart={handleDragStart}
-												onDragOver={handleDragOver}
-												onDragEnd={handleDragEnd}
-												onDragEnter={handleDragEnter}
-												onDragLeave={handleDragLeave}
-											/>
-										)
+									return renderRow(
+										row,
+										<Row
+											id={id}
+											key={id}
+											keyField={keyField}
+											data-row-id={id}
+											columns={tableColumns}
+											row={row}
+											rowCount={sortedData.length}
+											rowIndex={i}
+											selectableRows={selectableRows}
+											expandableRows={expandableRows}
+											expandableIcon={expandableIcon}
+											highlightOnHover={highlightOnHover}
+											pointerOnHover={pointerOnHover}
+											dense={dense}
+											expandOnRowClicked={expandOnRowClicked}
+											expandOnRowDoubleClicked={expandOnRowDoubleClicked}
+											expandableRowsComponent={expandableRowsComponent}
+											expandableRowsComponentProps={expandableRowsComponentProps}
+											expandableRowsHideExpander={expandableRowsHideExpander}
+											defaultExpanderDisabled={expanderDisabled}
+											defaultExpanded={expanderExpander}
+											expandableInheritConditionalStyles={expandableInheritConditionalStyles}
+											conditionalRowStyles={conditionalRowStyles}
+											selected={selected}
+											selectableRowsHighlight={selectableRowsHighlight}
+											selectableRowsComponent={selectableRowsComponent}
+											selectableRowsComponentProps={selectableRowsComponentProps}
+											selectableRowDisabled={selectableRowDisabled}
+											selectableRowsSingle={selectableRowsSingle}
+											striped={striped}
+											onRowExpandToggled={onRowExpandToggled}
+											onRowClicked={handleRowClicked}
+											onRowDoubleClicked={handleRowDoubleClicked}
+											onRowMouseEnter={handleRowMouseEnter}
+											onRowMouseLeave={handleRowMouseLeave}
+											onSelectedRow={handleSelectedRow}
+											draggingColumnId={draggingColumnId}
+											onDragStart={handleDragStart}
+											onDragOver={handleDragOver}
+											onDragEnd={handleDragEnd}
+											onDragEnter={handleDragEnter}
+											onDragLeave={handleDragLeave}
+										/>,
 									);
 								})}
 							</Body>
diff --git a/src/DataTable/defaultProps.tsx b/src/DataTable/defaultProps.tsx
index b56f42e8..97af3213 100644
--- a/src/DataTable/defaultProps.tsx
+++ b/src/DataTable/defaultProps.tsx
@@ -102,5 +102,5 @@ export const defaultProps = {
 	onSelectedRowsChange: noop,
 	onSort: noop,
 	onColumnOrderChange: noop,
-	renderRow: <T,>(row: T, rowContent: JSX.Element) => rowContent
+	renderRow: <T,>(row: T, rowContent: JSX.Element) => rowContent,
 };
diff --git a/stories/DataTable/RowLink.stories.js b/stories/DataTable/RowLink.stories.js
index b2b70ddc..b638e122 100644
--- a/stories/DataTable/RowLink.stories.js
+++ b/stories/DataTable/RowLink.stories.js
@@ -21,12 +21,23 @@ const columns = [
 ];
 
 export const RowLink = () => {
-	return <DataTable title="Movie List" columns={columns} data={data} pagination renderRow={(row, rowContent) => <a href={`/${row.id}`} style={{display: 'block'}} target="_blank">{rowContent}</a>} />;
+	return (
+		<DataTable
+			title="Movie List"
+			columns={columns}
+			data={data}
+			pagination
+			renderRow={(row, rowContent) => (
+				<a href={`/${row.id}`} style={{ display: 'block' }} target="_blank" rel="noreferrer">
+					{rowContent}
+				</a>
+			)}
+		/>
+	);
 };
 
 export default {
 	title: 'RowLink',
 	component: RowLink,
-	parameters: {
-	},
+	parameters: {},
 };