How to maintain css transitions in react table on data change

Question

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:

This is the actual outcome:

Update

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

codemonkey · Accepted Answer · 2021-02-20 18:32:24Z

1

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

answered Feb 20, 2021 at 18:32

codemonkey

7,9755 gold badges28 silver badges46 bronze badges

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

4 Comments

Eliya Cohen Over a year ago

But it's uncontrolled. It doesn't update the actual state... the state of the div should be derived from the props. That's the whole purpose of my goal.

codemonkey Over a year ago

@EliyaCohen I said ...that manages its own state not to suggest that that was the culprit. I only said it to complete the point; that it should be its own element. This same issue happens inside MUI elements a lot. Encapsulating these transitional components into their elements seems to always fix it.

Eliya Cohen Over a year ago

I understand, and while I thank you for trying to help, this is not a solution and it completes the transition "point" by breaking the functional one. I can't mark this question as an answer, and I don't mean to sound rude but I would prefer if you could modify your answer so it won't break the functional logic, or delete it. Thanks :)

codemonkey Over a year ago

@EliyaCohen Fair enough.

Collectives™ on Stack Overflow

How to maintain css transitions in react table on data change

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

This is the expected outcome:

This is the actual outcome:

Update

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

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

This is the expected outcome:

This is the actual outcome:

Update

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related