Passing function props to customRowComponent in 1.0

[hewrin]

Hi everyone For reference I'm using version 1.8.

I'm trying to do something like in #286, specifically what I'm trying to do is add a checkbox to every Row of the table, and when a checkboxed is checked, it will update the state in the component that contains the Griddle component.

Any advice on how to do this?

Thanks in advance! 😄

[dahlbyk]

Check out extraData, which allows you to specify additional props that are available to custom cell components.

[hewrin]

Thanks for the reply!

I'm not sure how extraData works though, we pass the props to and the Cell component can access the prop we pass in?

Can other Components (ie Row) access it too?

Thanks again!

[dahlbyk]

You can access the props from Cell or from an individual column's customComponent/headingCustomComponent.

For your situation, I would try adding a "fake" ColumnDefinition with your checkbox as its customComponent.

[hewrin]

Thanks for the reply, my setup now is something like this.

This is my file with Griddle in it

import React from "react"
import Griddle, { plugins, RowDefinition, ColumnDefinition } from "griddle-react"
import { griddleTheme } from "../../values/griddleTheme"
import Layout from "../../components/retailer/shared/layout"
import Row from "../../components/country_manager/active_locations/row"
import CheckboxCell from "../../components/country_manager/active_locations/checkbox_cell"

export default class ActiveLocations extends React.Component {

  render() {
    return (
      <div>
        <Griddle
          styleConfig={griddleTheme}
          data={this.props.locations.data}
          plugins={[plugins.LocalPlugin]}
          pageProperties={{pageSize: 5}}
          components={{Layout,Row}}
          >
          <RowDefinition>
            <ColumnDefinition id="Location Name" />
            <ColumnDefinition id="Address" />
            <ColumnDefinition id="Make Inactive" customComponent={{CheckboxCell}}/>
          </RowDefinition>
        </Griddle>
        <button className="btn btn-primary">Deactivate</button>
      </div>
    )
  }
}

Row looks like this

import React from "react"
import { plugins } from "griddle-react"
import { connect } from "react-redux"

class Row extends React.Component {

  render() {
    const { rowData } = this.props;
    return (
      <tr>
        <td>{rowData.attributes["address-attributes"].company}</td>
        <td>{rowData.attributes["address-attributes"].full_address}</td>
      </tr>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    rowData: plugins.LocalPlugin.selectors.rowDataSelector(state, ownProps)
  };
};

export default connect(mapStateToProps)(Row);

And my CheckboxCell looks like this

import React from 'react';

const CheckboxCell = () => {
  return(
   <div> 
  <td>
    <input
      name="inactive"
      type="checkbox"
     />
  </td>
  </div>
)};

export default CheckboxCell;

However the checkbox doesn't seem to appear on the table that is rendered

Thanks in advance!

[dahlbyk]

Unless I'm missing something, your Row isn't actually rendering any of the Cells. As far as I can tell, you shouldn't need a custom Row:

  <RowDefinition>
    <ColumnDefinition id="company" title="Location Name" />
    <ColumnDefinition id="full_address" title="Address" />
    <ColumnDefinition id="Make Inactive" customComponent={CheckboxCell} />
  </RowDefinition>

(Note: customComponent={CheckboxCell} instead of customComponent={{CheckboxCell}}; the latter creates an object.)

[hewrin]

the data I'm passing into Griddle is kind of nested, is there a way to pass it in via ColumnDefinition id when its nested?

Though when I tried to pass in some dummy data like this

  render() {
    var data = [
      {
        "id": 0,
        "name": "Mayer Leonard"
      },
      {
        "id": 1,
        "name": "Bob Leonard"
      }
    ];
    return (
      <div>
        <Griddle
          styleConfig={griddleTheme}
          data={data}
          plugins={[plugins.LocalPlugin]}
          pageProperties={{pageSize: 5}}
          components={{Layout}}
          >
          <RowDefinition>
            <RowDefinition>
              <ColumnDefinition id="id" title="Id" />
              <ColumnDefinition id="name" title="Name" />
              <ColumnDefinition customComponent={CheckboxCell} />
            </RowDefinition>
          </RowDefinition>
        </Griddle>
        <button className="btn btn-primary">Deactivate</button>
      </div>
    )
  }

I only got an undefined header

Thanks in advance!

[hewrin]

Oh, it seems I can do pass in nested data, the syntax should look like this right?

  render() {
    return (
      <div>
        <Griddle
          styleConfig={griddleTheme}
          data={this.props.locations.data}
          plugins={[plugins.LocalPlugin]}
          pageProperties={{pageSize: 5}}
          components={{Layout}}
          >
          <RowDefinition>
            <RowDefinition>
              <ColumnDefinition id="attributes.address-attributes.company" title="Location Name"  nested={true} />
              <ColumnDefinition id="attributes.address-attributes.full_address" title="Address"  nested={true} />
              <ColumnDefinition id="Make Inactive" customComponent={CheckboxCell} />
            </RowDefinition>
          </RowDefinition>
        </Griddle>
        <button className="btn btn-primary">Deactivate</button>
      </div>
    )
  }

though I still get like in the screenshot above

[dahlbyk]

Everything in the last example seems correct at a glance...

[hewrin]

I'm sorry, it was a typo on my part. I typed RowDefinition twice. Its now working well now, I can now pass a function to my custom props. Thank you so much for your help :D

[dahlbyk]

I'm sorry, it was a typo on my part. I typed RowDefinition twice.

Feeling pretty silly to have overlooked that myself. Glad you got it working!