How to allow users to click on rows

Question

I'm using griddle-react in order to display a table. I'm having trouble making each cell clickable. For now I'd like to just print the id value to the console. Here is my code:

import React from "react";
import ReactDOM from "react-dom";
import Griddle, { plugins } from "griddle-react";

import "./styles.css";

const styleConfig = {
  icons: {
    TableHeadingCell: {
      sortDescendingIcon: <small>(desc)</small>,
      sortAscendingIcon: <small>(asc)</small>
    }
  },
  classNames: {
    Row: "row-class"
  },
  styles: {
    Filter: { fontSize: 18 },
    NextButton: {}
  }
};

export default class App extends React.Component {
  getData() {
    var data = [
      {
        id: 0,
        name: "Mayer Leonard",
        city: "Kapowsin",
        state: "Hawaii",
        country: "United Kingdom",
        company: "Ovolo",
        favoriteNumber: 7
      },
      {
        id: 1,
        name: "Mayer Leonard",
        city: "Kapowsin",
        state: "Hawaii",
        country: "United Kingdom",
        company: "Ovolo",
        favoriteNumber: 7
      }

    ];
    return data;
  }

  constructor() {
    super();
    this.state = {
      data: this.getData(),
      selectedRowId: 0
    };
    this.onRowClick = this.onRowClick.bind(this);
  }

  onRowClick(row) {
    this.setState({ selectedRowId: row.props.data.id });
    console.log("SELECTED");
  }

  render() {
    const { data } = this.state;
    const rowMetadata = {
      bodyCssClassName: rowData =>
        rowData.id === this.state.selectedRowId ? "selected" : ""
    };
    return (
      <Griddle
        styleConfig={styleConfig}
        data={data}
        plugins={[plugins.LocalPlugin]}
        rowMetadata={rowMetadata}
        onRowClick={this.onRowClick}
      />
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

As you can see, I only have two records in my table with different id's. So if I click anywhere on the first row, I'd like to print the value "0" which is the id and for the second row, I'd like to print the value "1". Any help would be great!

First thing never bind the function directly in render instead do binding in constructor and use the reference in onClick event. Regarding your issue have you tried event.target.id and event.target.value? — Hemadri Dasari, Oct 09 '18 at 14:10
@Think-Twice, another possibilty would be to use static arrow functions to bind the context. As in `onRowClick = (row) => {}` — Moritz Roessler, Oct 09 '18 at 14:38
@Moritz Roessler arrow function do create a new function every time the component renders. It works same as binding function directly in render. Please take a look accepted answer here this explains in detail about when to use arrow function and when you dont https://stackoverflow.com/questions/52031147/react-which-is-recommended-arrow-or-normal-function — Hemadri Dasari, Oct 09 '18 at 14:43
@Think-Twice I've binded it in the constructor. See update. This doesn't solve my problem though — tee, Oct 09 '18 at 14:46
@Think-Twice I'm talking about statically binding the arrow function in the class. As in `class App extends React.Component { onRowClick = () => {} }`. There will be a single instance upont instantiation, nothing more. — Moritz Roessler, Oct 09 '18 at 14:57
@Think-Twice It has some caveats, but I don't like to clubber my constructor. [Related](https://medium.com/@charpeni/arrow-functions-in-class-properties-might-not-be-as-great-as-we-think-3b3551c440b1); — Moritz Roessler, Oct 09 '18 at 14:59

score 0 · Answer 1 · answered Oct 09 '18 at 14:51

0

Perhaps Try this

  onRowClick(event) {
      this.setState({ selectedRowId: event.target.id });
  }

answered Oct 09 '18 at 14:51

Hemadri Dasari

32,666
37
119
162

score 0 · Answer 2 · answered May 06 '19 at 14:51

You can use a RowEnhancer to accomplish your needs, in the case below I'm goin to console log the id of the clicked row

  <Griddle
    styleConfig={styleConfig}
    data={data}
    plugins={[plugins.LocalPlugin]}
    rowMetadata={rowMetadata}
    components={{
    RowEnhancer: OriginalComponent => props => (
     <OriginalComponent
        {...props}
        onClick={() => console.log(data[props.griddleKey].id)}
     />
   )}}>

How to allow users to click on rows

2 Answers2