rowFormatter prop gets dropped when ConfigUtils.propToOptions is called about react-tabulator

[Austint30]

Moving the rowFormatter function to the options attribute seems to work.

<ReactTabulator
    columns={[...]}
    data={[...]}
    options={{
        rowFormatter={(row) => {...}} //<- This works
    }}
/>

I find it odd how using options like height and layout work at the root level of the Component's props, but other options like rowFormatter must be put under options.

[ngduc]

Thanks for reporting.
rowFormatter was missing as a first-class prop. I've just fixed it in the latest version.
Later on, I may have some pass-through logic to add all tabulator options as first-class props.
:]

[ngduc]

@Austint30 Please let me know if new version works for you. Thanks.

[brendonhc]

@Austint30 Please let me know if new version works for you. Thanks.

It's worked for me! Thanks!

But, I wanted format my rows with Nested Tables like a: http://tabulator.info/examples/4.0#nested-tables

I got it, but, I had to import Tabulator to make Nested Tables exactly equal tabulator examples:

import Tabulator from "tabulator-tables"; //import Tabulator library
import "tabulator-tables/dist/css/tabulator.min.css"; //import Tabulator stylesheet

My ReactTabulator looks like this:

<ReactTabulator
    ref={ref => (this.ref = ref)}
    data={this.props.sector.humanresources}
    locale={true}
    columns={[
        {
            title: "Tipo",
            sorter: "string",
            field: "humanresource.name",
            headerSortStartingDir: "desc",
            locale: true,
            headerFilter: false,
            widthGrow: true
        },
        {
            title: "Quantidade",
            field: "quantity.planned",
            editor: "number",
            validator: ["integer", "min:0"]
        },
        {
            formatter: deleteIcon,
            align: "center",
            // documentation: http://tabulator.info/docs/4.2/callbacks#cell
            cellClick: (event, cell) => this.handleHumanResourcesRemove(event, cell)
        }
    ]}
    rowFormatter={
        row => {
            // documentation: http://tabulator.info/examples/4.0#nested-tables
            //create and style holder elements
            var holderEl = document.createElement("div");
            var tableEl = document.createElement("div");

            holderEl.style.boxSizing = "border-box";
            holderEl.style.padding = "10px 30px 10px 10px";
            holderEl.style.borderTop = "1px solid #333";
            holderEl.style.borderBotom = "1px solid #333";
            holderEl.style.background = "#ddd";

            tableEl.style.border = "1px solid #333";

            holderEl.appendChild(tableEl);

            row.getElement().appendChild(tableEl);

            var subTable = new Tabulator(tableEl, {
                layout: "fitColumns",
                data: row.getData().people,
                columns: [
                    { title: "Nome", field: "fullName", sorter: "fullName" },
                    { title: "CPF", field: "documentId" },
                    { title: "Email", field: "email" },
                    { title: "Tel", field: "tel" },
                    {
                        formatter: editIcon,
                        align: "center",
                        cellClick: (event, cell) => this.handleHumanResourcesAddPerson(event, cell)
                    }
                ]
            })

        }}
    dataEdited={data => this.handleHumanResourcesChange(data)}
    layout={"fitColumns"}
    autoResize={true}
    reactiveData={true}
/>

My question is, can I make this with ReactTabulator only? (Without pure Tabulator)
May you make Nested Tables examples?

Thanks in advance!