Custom React components in Table rows?

[tirdadc]

I figured this would allow me to include my own custom components (in this case a customized input defined as TextField) in the Table, but I get this error and the rows do not render:

The only possible children of <Table> are <Thead>, <Tr>, or one <Tfoot>.

Is there no way to use this with other components at this point?

[rickysahu]

Yup, i have this same issue, it makes managing more complex code difficult.

[ssorallen]

How would you expect sorting and filtering to work for those elements?

[rickysahu]

the simplest way that comes to mind is getting the entire text content of the component and using that as a string value. if all values can be parsed as float / numeric, then sort / filter as numeric.

[enriquejosepadilla]

I had rows that had to hold array values and then since i didnt use the data prop sorting/filtering didnt work. Since my Tr wrapped my div i used the following for the sorting.

//We have to deconstruct the DIV array that we made
const arraySort = (a, b) => {
    const valuesA = a.props.children[0];
    const valuesB = b.props.children[0];

    if (valuesA.length === 0) {
        return 1;
    }
    if (valuesB.length === 0) {
        return -1;
    }

    //for some reason the array haves empty values with the "real" value
    const realA = valuesA[0].props.children.find(v => v !== ' ');
    const realB = valuesB[0].props.children.find(v => v !== ' ');

    return realA.localeCompare(realB);
};