0

This is complete code Edit black-frost-j9zuv

I have a react-table. version 6.1.1. I have added complete code in above codeSandbox and also added relevant code snippets below.

I can interpolate data for [0] index but, I am unable to do it for all the entries and that is the problem.

The way I have done for the [0] index, I wish to do something similar. but, not sure exactly how to achieve that.

Code for custom cell

MyCell({
    value,
    columnProps: {
      rest: { someFunc }
    }
  }) {
    const data = {
      // labels: value.map((val, idx) => {
      //   return idx;
      // }),
      datasets: [
        {
          backgroundColor: [
            "#ff8779",
            "#2a84e9",
            "#e2e2e2",
            "#ff8779",
            "#2a84e9",
            "#e2e2e2"
          ],
          data: value
        }
      ]
    };

    return <Pie data={data} />;
  }

Code for columns

  columns = [
    // * embedding checkbox
    {
      Header: "Select",
      Cell: row => (
        <input
          type="checkbox"
          defaultChecked={this.state.checked[row.index]}
          checked={this.state.checked[row.index]}
        />
      )
    },
    {
      Header: "System",
      accessor: "sites[0].systems[0].systemName"
    },
    {
      Header: "Measurement",
      accessor: "sites[0].systems[0].measurements[0].name"
    },
    {
      Header: "Min",
      accessor: "sites[0].systems[0].measurements[0].min"
    },
    {
      Header: "Max",
      accessor: "sites[0].systems[0].measurements[0].max"
    },
    {
      Header: "Avg",
      accessor: "sites[0].systems[0].measurements[0].average"
    },
    {
      Header: "Last",
      accessor: "sites[0].systems[0].measurements[0].last"
    },
    {
      Header: "Bar",
      accessor: "sites[0].systems[0].measurements[0].buckets.values",
      Cell: this.MyCell
    }
  ];

code for react-table component inside render()

            <ReactTable
                  className="-striped -highlight"
                  ref={r => (this.reactTable = r)}
                  data={[...measurementsData]}
                  pageSize={
                    measurementsData.length > 10 ? 10 : measurementsData.length
                  }
                  filterable
                  resizable={true}
                  columns={this.columns}
                  showPaginationTop={false}
                  showPaginationBottom={false}
                />
Improve this question

1 Answer 1

Reset to default
0

You need to write a custom Cell function

Sorry, but i don't know how to "fancy"-flatten the arrays, so I used the same approach with my answer to your previous question

  renderJson(sites, property) {
    let flat = sites.map(md => md.systems);
    flat = [].concat(...flat);
    flat = flat.map(md => md.measurements);
    flat = [].concat(...flat);

    return (
      <div>
        {flat.map(measurement => {
          return (
            <>
              {measurement[property]}
              <br />
            </>
          );
        })}
      </div>
    );
  }

and then

      Cell: row => {
        return this.renderJson(row.original.sites, 'name')
      }
.
.
.
      Cell: row => {
        return this.renderJson(row.original.sites, 'min')
      }
.
.
.
      Cell: row => {
        return this.renderJson(row.original.sites, 'max')
      }

Here is the link to see it in action https://codesandbox.io/s/stoic-mclaren-kvmpg

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

right. understood. but even in this approach also, we got to do [0] index. I want to do it for all entries at all the indices like sites.systems.systemName. kind of a generalized approach.
ok you need to copy this part of code for the other columns too. maybe you can write a central generic/abstract function that can flatten the array and then pass it as argument to cell method body, but I don't know how this can be done.
yes, because it tries to iterate "measurements" property too, that's why it doesnt work for system and bar. they have different paths. i added a re-usable function for most of the columns. these 2 need other functions. well system needs for example a slightly smaller function. (measurements aren't needed in renderJson function for this case)
e.g. for system you could write an if statement if (property !== 'systemName') { flat = flat.map(md => md.measurements); flat = [].concat(...flat); } and there you are. systemName is handled too. bar is another story, but i think you already had a piechart there, MyCell sth like that.
check my updated sandbox codesandbox.io/s/keen-bush-yk66n
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.