Adding a custom react component as a cell to each rows.

[VikramMaiya]

Hi team,
I want to use your react-tabulator for showing the list of alerts. Each alert will be a row. A row will have multiple cells with alert details. I wanted to add a button as one of the cell in each row. On button click the alert is acknowledged.
Something similar to below screen shot : The below table contains a single row/ alert with a button to acknowledge it.

[olifolkerd]

Hey @VikramMaiya

Have a look at the documentation for Formatting Button Columns for more info on how to achieve this.

Cheers

Oli :)

[Keyframe]

I have the same problem. if you return a react component in the formatter (in function) it's not working. It works on regular HTML, but react components not.

Doesn't matter even if you do something like:

let out = (
    <div>
        <MyBeautifulReactComponent />
    </div>);
return out;

[Keyframe]

Could be related: #25

[geocine]

I checked the source code for footerElement they are using

import { renderToString } from 'react-dom/server';

to render the JSX component as string for the footerElement

[ngduc]

Right, use renderToString to render JSX to html for tabulator.

[geocine]

Right, use renderToString to render JSX to html for tabulator.

I have a use case though where I want to render react component that renders a button. clicking on that button will open a modal that loads data. With renderToString it will only render the button and that button will not actually do anything .

Are there any other ways to make the component work like how it is in React?

[geocine]

I have achieved my goal through Event Delegation.

1. Create a custom formatter for your button, It should just be a plain button not a React component
2. Add an identifier for your button by adding a class or id attribute. If you want to pass data, add a data-* attribute and set the value as a JSON stringified object
3. On the ReactTabulator component add an onClick={handleClick} handler
4. On your handleClick method you can check all the click event and add an action based on the identifier

   handleClick= e => {
       const className = e.target.getAttribute('class')
       if (className == 'formatter-button') {
            // get data from data attribute eg. data-description
            const { description } = e.target.dataset
            // do whatever
       }
   }

I hope this helps you with your use case @VikramMaiya

[kclark6595]

Has anyone came up with a good solution for this? I am new to node and React, and am having a hard time with what I figured should be something simple.

I would like to display a table using react-tabulator with ID as the first column. I would like to use the reactjs-popup module on the ID element to open a modal

[geocine]

@CodeHutDevelopment have you tried my solution above, that is exactly what you need.

[ngduc]

@VikramMaiya @geocine @Keyframe @CodeHutDevelopment @olifolkerd
released 0.9.1 to add reactFormatter to support JSX in formatter (instead of using renderToString)

Usage:

import { reactFormatter } from "react-tabulator";

function SimpleButton(props: any) {    // your React Component to use in a cell
  const cellData = props.cell._cell.row.data;
  return <button onClick={() => alert(cellData.name)}>Show</button>;
}
const columns = [
  { title: 'Custom', field: 'custom', align: 'center', formatter: reactFormatter(<SimpleButton />) },
]

Codesandbox example
Please let me know if that works.

[kclark6595]

@ngduc That was EXACTLY what I was looking for !!!!!!!

[cubecleveland]

HI Guys, not sure if anyone can help here.
Im using React with Tabulator and im trying to open a modal on cell click.
My modal is in a portal... and idea how to get to the React component from the cellClick