How to add dropdown to react-table on click of icon

Question

I am using react table 7.0 , How can i add and iconColumn , and on click of that , need to show an dropdown.

 {
        Header: "",
        accessor: "actionColumn",
        disableSortBy: true,
        Cell: ({ original }) => (
           
            <div className="cursor__pointer ">
                <Icon className="padding5" iconName="RemoveLink" aria-hidden="true" />
            </div>
        )
    },

I am able to render an icon on the column like above. How can i render a dropdown on click of it ?

Are you using some components library? If no - then you can check them - a lot of them have dropdown components, like here: react-bootstrap.github.io/components/dropdowns If you don't want to include whole library for that, then you can also add single component like this one: github.com/fraserxu/react-dropdown — mehowthe
– mehowthe, Commented Feb 22, 2021 at 12:58
But , how do i tell react-table to render a dropdown on click of that icon ? not able to figure that out.. — bharath
– bharath, Commented Feb 23, 2021 at 9:19

mehowthe · Accepted Answer · 2021-02-24 12:00:47Z

3

Here's an example, how to do this with this simple @trendmicro-frontend/react-dropdown library:

      {
        Header: "",
        accessor: "actionColumn",
        disableSortBy: true,
        Cell: ({ original }) => (

            <div className="cursor__pointer ">
              <Dropdown
                  onSelect={(eventKey) => {
                  }}
              >
                <Dropdown.Toggle btnStyle="link" noCaret
                >
                  <Icon className="padding5" iconName="RemoveLink" aria-hidden="true" />
                </Dropdown.Toggle>
                <Dropdown.Menu>
                  <MenuItem header>Header</MenuItem>
                  <MenuItem eventKey={1}>link</MenuItem>
                  <MenuItem divider />
                  <MenuItem header>Header</MenuItem>
                  <MenuItem eventKey={2}>link</MenuItem>
                </Dropdown.Menu>
              </Dropdown>
            </div>
        )
      },

A working example here:

https://codesandbox.io/s/distracted-leftpad-c6onr?file=/src/App.js

answered Feb 24, 2021 at 12:00

mehowthe

8517 silver badges14 bronze badges

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

2 Comments

bharath Over a year ago

thanks , the example does not have the dropdown .. But i get the idea

mehowthe Over a year ago

Sorry - my bad - changes were not saved, example should work now

Collectives™ on Stack Overflow

How to add dropdown to react-table on click of icon

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related