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..3af409f2 100644 --- a/src/DataTable/DataTable.tsx +++ b/src/DataTable/DataTable.tsx @@ -115,6 +115,7 @@ function DataTable(props: TableProps): JSX.Element { customStyles = defaultProps.customStyles, direction = defaultProps.direction, onColumnOrderChange = defaultProps.onColumnOrderChange, + renderRow = defaultProps.renderRow, className, } = props; @@ -440,7 +441,8 @@ function DataTable(props: TableProps): JSX.Element { const expanderExpander = !!(expandableRows && expandableRowExpanded && expandableRowExpanded(row)); const expanderDisabled = !!(expandableRows && expandableRowDisabled && expandableRowDisabled(row)); - return ( + return renderRow( + row, (props: TableProps): JSX.Element { onDragEnd={handleDragEnd} onDragEnter={handleDragEnter} onDragLeave={handleDragLeave} - /> + />, ); })} diff --git a/src/DataTable/defaultProps.tsx b/src/DataTable/defaultProps.tsx index 3908f027..97af3213 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: (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 = { * 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..b638e122 --- /dev/null +++ b/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 ( + ( + + {rowContent} + + )} + /> + ); +}; + +export default { + title: 'RowLink', + component: RowLink, + parameters: {}, +};