score:8

Accepted answer

UPDATE: With material-ui 0.15.4, the parameters passed to the onRowSelection handler have been changed. See answer from @Jonathn for correct usage going forward.

onRowSelection is a property of <Table> not <TableRow>. Also, it doesn't call the handler with an event when called (e), rather, it will call it with the key. You can then use that to find the row. Like so:

_onRowSelection(key) {
  console.log(key, this.state.data[key])
},

getInitialState() {
  return {
    data : [{id:0,name:"joe"},{id:1,name:"john"},{id:2,name:"Brad"},{id:3,name:"Jack"},{id:4,name:"Andrew"}],
    fixedHeader: true,
    fixedFooter: true,
    stripedRows: false,
    showRowHover: true,
    selectable: true,
    multiSelectable: false,
    enableSelectAll: false,
    deselectOnClickaway: true,
    height: '300px',
  };
},

render() {
  return (
    <div>
      <div className="col-sm-6">
        <h1>MagicTableReact</h1>
        <Table
          height={this.state.height}
          fixedHeader={this.state.fixedHeader}
          fixedFooter={this.state.fixedFooter}
          selectable={this.state.selectable}
          multiSelectable={this.state.multiSelectable}
          onRowSelection={this._onRowSelection}
        >
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>ID</TableHeaderColumn>
              <TableHeaderColumn>Name</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody
          >
            {this.state.data.map((user, i) =>
              <TableRow key={i} value={user}>
                <TableRowColumn>{user.id}</TableRowColumn>
                <TableRowColumn>{user.name}</TableRowColumn>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

score:0

<Table onCellClick={(row, col, event) => console.log(event.target.innerHTML)}>

score:0

You can use your initial data array and reference the index based on the row number to access your selected rows and the object that's associated with it. This is a basic example and obviously depending on what you want to do with the data you may need to add more logic.

_onRowSelection(rows) {
    for (let i = 0; i < rows.length; i++) {
        console.log(this.state.data[rows[i]])
    }
},

getInitialState() {
  return {
    data : [{id:0,name:"joe"},{id:1,name:"john"},{id:2,name:"Brad"},{id:3,name:"Jack"},{id:4,name:"Andrew"}]
  };
},

render() {
  return (
    <div>
      <div className="col-sm-6">
        <h1>MagicTableReact</h1>
        <Table onRowSelection={(rows) => this._onRowSelection(rows)}>
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>ID</TableHeaderColumn>
              <TableHeaderColumn>Name</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody
          >
            {this.state.data.map((user, i) =>
              <TableRow key={i} value={user}>
                <TableRowColumn>{user.id}</TableRowColumn>
                <TableRowColumn>{user.name}</TableRowColumn>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

score:6

Using [Material-UI 0.15.4]

onRowSelection only returns none, all or an array containing the row number of the row(s) selected.

Using onCellClick, also at <Table> level, returns rowNumber, columnNumber and the event. This event contains the table cell under target and you can reference a data- tag, etc. from there.

Example:

function handleCellClick (rowNumber, columnNumber, evt) {
  console.log("activityId", evt.target.dataset.myRowIdentifier);
}

function createTableRow (content) {
  let activityId = content.shift();
  return (
    <TableRow key={activityId}>
      {content.map((columnContent, i) => {
        return (
          <TableRowColumn key={i} data-my-row-identifier={activityId} >{columnContent}</TableRowColumn>
        );
      })}
    </TableRow>
  );
}

return (
  <div>
    <Table onCellClick={handleCellClick}>
      <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
      {createHeaderRow(tableHeader)}
      </TableHeader>
      <TableBody displayRowCheckbox={false}>
      {filteredTable.map(createTableRow)}
      </TableBody>
    </Table>
  </div>
);

My first answer on StackOverflow ... hope it helps :-)


Related Query

More Query from same tag