2

I am using react-table plugin, and my cells keep re-rendering while I am changing the applied searching filter even though their values aren't changed.

As seen in the video, name and debt TDs keep updating, even though their values are static.

https://i.imgur.com/2KkNs9f.mp4

I imagine, that may impact performance on larger tables.

Is there any fix? Or am I doing anything wrong?

Thanks.

Edit:

Code has been requested. Not much to show, basically everything done as in documentation.

Rendering part:

render(){

const columns = [
      {
        Header: "Name",
        accessor: "name",
        className: css.cell,
        headerClassName: css.cell,
        filterMethod: (filter, row) => {
          return row[filter.id]
            .toLowerCase()
            .includes(filter.value.toLowerCase());
        },
        Cell: props => {
          return <span>{props.value}</span>;
        }
      },
      {
        Header: "Tc",
        accessor: d => {
          const date = d.lastChange;

          if (date.length) {
            const s = date.split(" ");
            const s2 = s[0].split("/");
            const mdy = [s2[1], s2[0], s2[2]].join("/");
            const his = s[1];
            return Date.parse(mdy + " " + his);
          }
          return "";
        },
        id: "lastChange",
        Cell: props => {
          return <ArrowTime lastChange={props.value}></ArrowTime>;
        },
        headerClassName: css.cell,
        className: css.cell
      },
      {
        Header: "Debt",
        accessor: d => Number(d.lastDebt),
        id: "lastDebt",
        headerClassName: css.cell,

        className: css.cell,
        Cell: props => {
          return <span className="number">{props.value}</span>;
        },
        getProps: (state, rowInfo, column) => {
          return {
            style: {
              background: rowInfo ? this.getColor(rowInfo.row.lastDebt) : null
            }
          };
        }
      }
    ];
     return (
          <ReactTable
            data={this.props.table}
            columns={columns}
            minRows={0}
            showPagination={false}
            NoDataComponent={CustomNoDataComponent}
            className={css.table}
            resizable={false}
            filtered={[{ id: "name", value: this.props.filter }]}
            getTrProps={(state, rowInfo) => {
              return {
                className: rowInfo ? css.subRow : ""
              };
            }}
            getTrGroupProps={(state, rowInfo) => {
              return {
                className: rowInfo ? css.row : ""
              };
            }}
            getTbodyProps={props => {
              return {
                className: props ? css.tbody : ""
              };
            }}
            getTheadProps={props => {
              return {
                className: props ? css.thead : ""
              };
            }}
            defaultSorted={[
              {
                id: "lastDebt",
                desc: true
              }
            ]}
          />
        );
}
Nick
  • 455
  • 9
  • 28
  • Hey Nick, great question. Could you post some code to help see if you are doing anything wrong. Thanks – Cloudish123 Nov 14 '19 at 14:02
  • @Cloudish123 Thanks for a quick response. Edited accordingly. – Nick Nov 14 '19 at 14:20
  • "In v7, you are able to render rows with any key prop that you choose (this will override the automatic internal key provided in row.getRowProps()" Looking over this issue, makes me think there should be a way to limit what changes with a filter. - https://github.com/tannerlinsley/react-table/issues/520 – Cloudish123 Nov 14 '19 at 14:40
  • 1
    @Cloudish123 Alright, got it. Will look into re-writing table then. Thank you for informing me about react-table 7. – Nick Nov 14 '19 at 15:03
  • Is it correct that you keep the react-table in a component and you pass that search string to that component as a prop? – Iliya Reyzis Nov 15 '19 at 22:45
  • @IliyaReyzis why not? – Nick Nov 16 '19 at 09:59
  • I'm not saying its wrong, I'm just asking how your structure build. You need to keep in mind that components will re-render themselves when their properties changed. – Iliya Reyzis Nov 17 '19 at 05:20
  • @IliyaReyzis I am new so I don't know if its correct structure or not – Nick Nov 18 '19 at 14:58
  • @Nick Could you share more of your code? Structure of the filters and how you pass them between components – Iliya Reyzis Nov 18 '19 at 16:20
  • 1
    @IliyaReyzis I pass filter from table's parent component which contains both search input field and table, if that helps – Nick Nov 18 '19 at 16:31

0 Answers0