Allow custom row container to wrap table row with prefer tag or component

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",

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;
 
@@ -440,7 +441,8 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 									const expanderExpander = !!(expandableRows && expandableRowExpanded && expandableRowExpanded(row));
 									const expanderDisabled = !!(expandableRows && expandableRowDisabled && expandableRowDisabled(row));
 
-									return (
+									return renderRow(
+										row,
 										<Row
 											id={id}
 											key={id}
@@ -484,7 +486,7 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 											onDragEnd={handleDragEnd}
 											onDragEnter={handleDragEnter}
 											onDragLeave={handleDragLeave}
-										/>
+										/>,
 									);
 								})}
 							</Body>

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,
 };

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 = {

stories/DataTable/RowLink.stories.js

@@ -0,0 +1,43 @@
+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" rel="noreferrer">
+					{rowContent}
+				</a>
+			)}
+		/>
+	);
+};
+
+export default {
+	title: 'RowLink',
+	component: RowLink,
+	parameters: {},
+};