Repository: gregnb/mui-datatables
Pull request #130 (2018-08-13 14:51:39)

Add Feature: onRowClick
mui-datatables is a great project! It helps me a lot at [EntE](https://gitlab.com/skn0tt/EntE).

There was one feature missing for me:

`onRowClick` gets called when a row is clicked.
It's provided the full `data` of that row.


Patch:
diff --git a/README.md b/README.md
index 0118488..96f28de 100644
--- a/README.md
+++ b/README.md
@@ -154,6 +154,7 @@ The component accepts the following props:
 |**`viewColumns`**|boolean|true|Show/hide viewColumns icon from toolbar
 |**`onRowsSelect`**|function||Callback function that triggers when row(s) are selected. `function(currentRowsSelected: array, rowsSelected: array) => void`
 |**`onRowsDelete`**|function||Callback function that triggers when row(s) are deleted. `function(rowsDeleted: array) => void`
+|**`onRowClick`**|function||Callback function that triggers when a row is clicked. `function(rowData: string[], rowMeta: { dataIndex: number, rowIndex: number }) => void`
 |**`onCellClick`**|function||Callback function that triggers when a cell is clicked. `function(colIndex: number, rowIndex: number) => void`
 |**`onChangePage`**|function||Callback function that triggers when a page has changed. `function(currentPage: number) => void`
 |**`onChangeRowsPerPage`**|function||Callback function that triggers when the number of rows per page has changed. `function(numberOfRows: number) => void`
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
index d092dde..d72576f 100644
--- a/src/MUIDataTable.js
+++ b/src/MUIDataTable.js
@@ -71,6 +71,7 @@ class MUIDataTable extends React.Component {
       customToolbar: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
       customToolbarSelect: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
       customFooter: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+      onRowClick: PropTypes.func,
       resizableColumns: PropTypes.bool,
       selectableRows: PropTypes.bool,
       serverSide: PropTypes.bool,
@@ -799,6 +800,7 @@ class MUIDataTable extends React.Component {
             />
             <MUIDataTableBody
               data={this.state.displayData}
+              onRowClick={this.options.onRowClick}
               count={rowCount}
               columns={columns}
               page={page}
diff --git a/src/MUIDataTableBody.js b/src/MUIDataTableBody.js
index fc52621..f99a0c1 100644
--- a/src/MUIDataTableBody.js
+++ b/src/MUIDataTableBody.js
@@ -26,6 +26,8 @@ class MUIDataTableBody extends React.Component {
     options: PropTypes.object.isRequired,
     /** Data used to filter table against */
     filterList: PropTypes.array,
+    /** Callback to execute when row is clicked */
+    onRowClick: PropTypes.func,
     /** Table rows selected */
     selectedRows: PropTypes.object,
     /** Callback to trigger table row select */
@@ -80,7 +82,7 @@ class MUIDataTableBody extends React.Component {
   };
 
   render() {
-    const { classes, columns, options } = this.props;
+    const { classes, columns, options, onRowClick } = this.props;
     const tableRows = this.buildRows();
 
     return (
@@ -90,6 +92,8 @@ class MUIDataTableBody extends React.Component {
             <MUIDataTableBodyRow
               options={options}
               rowSelected={options.selectableRows ? this.isRowSelected(rowIndex) : false}
+              onClick={() => onRowClick(row, { rowIndex, dataIndex })}
+              id={"MUIDataTableBodyRow-" + dataIndex}
               key={rowIndex}>
               {options.selectableRows ? (
                 <MUIDataTableSelectCell
diff --git a/src/MUIDataTableBodyRow.js b/src/MUIDataTableBodyRow.js
index 2746710..9390bcb 100644
--- a/src/MUIDataTableBodyRow.js
+++ b/src/MUIDataTableBodyRow.js
@@ -17,6 +17,8 @@ class MUIDataTableBodyRow extends React.Component {
   static propTypes = {
     /** Options used to describe table */
     options: PropTypes.object.isRequired,
+    /** Callback to execute when row is clicked */
+    onClick: PropTypes.func,
     /** Current row selected or not */
     rowSelected: PropTypes.bool,
     /** Extend the style applied to components */
@@ -24,11 +26,12 @@ class MUIDataTableBodyRow extends React.Component {
   };
 
   render() {
-    const { classes, options, rowSelected } = this.props;
+    const { classes, options, rowSelected, onClick } = this.props;
 
     return (
       <TableRow
         hover={options.rowHover ? true : false}
+        onClick={onClick}
         className={classNames({
           [classes.root]: true,
           [classes.responsiveStacked]: options.responsive === "stacked",


Test patch:
diff --git a/test/MUIDataTableBody.test.js b/test/MUIDataTableBody.test.js
index 3ac2474..9a3c5f8 100644
--- a/test/MUIDataTableBody.test.js
+++ b/test/MUIDataTableBody.test.js
@@ -182,4 +182,36 @@ describe("<MUIDataTableBody />", function() {
 
     assert.strictEqual(selectRowUpdate.callCount, 1);
   });
+
+  it("should call onRowClick when Row is clicked", () => {
+    const options = { selectableRows: true };
+    const selectRowUpdate = stub();
+    const onRowClick = spy();
+
+    const t = mount(
+      <MUIDataTableBody
+        data={displayData}
+        count={displayData.length}
+        columns={columns}
+        onRowClick={onRowClick}
+        page={0}
+        rowsPerPage={10}
+        selectedRows={[]}
+        selectRowUpdate={selectRowUpdate}
+        options={options}
+        searchText={""}
+        filterList={[]}
+      />,
+    );
+
+    console.log(
+      t
+        .find("#MUIDataTableBodyRow-2")
+        .first()
+        .simulate("click"),
+    );
+
+    assert.strictEqual(onRowClick.callCount, 1);
+    assert(onRowClick.calledWith(data[2], { rowIndex: 2, dataIndex: 2 }));
+  });
 });