Button in column

[mcallistertyler]

Hi, is there a way to add a column of buttons within the table? Similar to the example with the checkboxes.

Thanks

[imballinst]

Hello @mcallistertyler! There are 2 ways to do it:

1. The first one is to declare it using cell and have the list of headers outside of the component (so it is always static): https://codesandbox.io/s/3-0-1-buttons-in-table-example-fir1fw?file=/src/App.js

{
  prop: "button",
  cell: (row) => (
    <button onClick={() => {
      alert(`${row.username}'s score is ${row.score}`)
    }}>Click me</button>
  )
}

2. The second one is a bit more dynamic -- in case you want some external states to affect the button's behavior: https://codesandbox.io/s/3-0-1-buttons-in-table-example-with-dynamic-one-uvhn1x?file=/src/App.js

{
  prop: "button",
  cell: (row) => (
    <button
      onClick={() => {
        alert(
          `${row.username}'s score is ${row.score} and you have clicked the button ${counter} times.`
        );
        setCounter((oldState) => oldState + 1);
      }}
    >
      Click me
    </button>
  )
}

Let me know if there are parts that I can explain more!

[mcallistertyler]

Exactly what I was looking for, thanks for these examples - very helpful and clear 👍