CODEWITHSUNDEEP
javascriptreactjsreact-table
Eliya Cohen
Eliya Cohen

Reputation: 11498

How to maintain css transitions in react table on data change

I'm using react-table (well...) to handle all of my tables in my app.

Basically, I'm trying to think of a way to maintain the CSS transitions in custom cells when the data of the table is changed. I'll give you an example:

I have a table of posts. Each post has an "active" column. This column is a UI switch. When the value of the cell (boolean) is true, the switch is turned on, and when it's off, then it toggles off. Whenever I toggle on or off the switch, there's a small animation that occurs, but not in react-table and I think I know why.

I assume, that whenever the data of the table is changed, then each Cell callback is being invoked and it returns a whole new component each time. If I'm wrong (hopefully), what would be the best approach here?

TL;DR - "Why it's not working"

I have created a demo here - https://codesandbox.io/s/brave-mendeleev-lkf5d?file=/src/index.css

This is the expected outcome:

A box with a background transition

This is the actual outcome:

a table with boxes that won't transition

Update

I'm looking for a solution that will update the state while doing the transitioning.

Upvotes: 0

Views: 991

Answers (1)

codemonkey
codemonkey

Reputation: 7915

You should make that transition piece into its own element that manages its own state:

const TransitionDiv = () => {
  const [active, setActive] = React.useState(false);
  return (
    <div
      className={"switch " + (active ? "active" : "inactive")}
      onClick={() => setActive(!active)}
    />
  );
};

Then use it like this:

...
          {
            Header: "Switch",
            accessor: "isActive",
            Cell: ({ value, cell: { row } }) => <TransitionDiv />
          }
...

Sandbox: https://codesandbox.io/s/admiring-hamilton-ylqtj?file=/src/App.js

Upvotes: 1

Related Questions