DataTable: Custom Column Component

[sisisin]

[ ] bug report
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Current behavior
Now, DataTable Component can't receive react function component

ok

<DataTable>
  <Column />
</DataTable>

ng

const MyColumn = () => (<Column />)
<DataTable>
  <MyColumn />
</DataTable>

Expected behavior

DataTable component can receive react function component

• React version:
  16.5.2

• PrimeReact version:
  2.0.0-beta.9

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  all

[nrayburn-tech]

I am also looking to be able to do this. My use case is adding the “sortable” and “filter” props by default.

[Liam-OShea]

I am also looking for this functionality. I am applying different filter types depending on the column data. I would like to create a CustomColumn component to handle the state and handlers for each filter.

[mertsincan]

Hi,

DataTable component expects Column tags in its children. After finding them, it creates itself according to their properties. When using a functional component, React doesn't tell us what type of component it is returning. Therefore, we cannot access the information of the returned element. For these reasons, DataTable cannot be created using functional components.

// our codes
let columns = React.Children.toArray(this.props.children);
...
for (let i = 0; i < columns.length; i++) {
    console.log('Field: ' + coumns[i].props.field); // you can access all info about column
    ...
}

You can examine the example below to make dynamic columns;
https://primefaces.org/primereact/showcase/#/datatable/dynamiccolumns

Also, please see this demo;

const DataTableDynamicDemo = () => {
    const [products, setProducts] = useState([]);
    const columns = [
        {field: 'code', header: 'Code', filter: true, sortable: true},
        {field: 'name', header: 'Name'},
        {field: 'category', header: 'Category', filter: true},
        {field: 'quantity', header: 'Quantity', sortable: true}
    ];

    const productService = new ProductService();

    useEffect(() => {
        productService.getProductsSmall().then(data => setProducts(data));
    }, []); // eslint-disable-line react-hooks/exhaustive-deps

    const dynamicColumns = columns.map((col,i) => {
        return <Column key={col.field} {...col} />;
    });

    return (
        <div>
            <div className="card">
                <DataTable value={products}>
                    {dynamicColumns}
                </DataTable>
            </div>
        </div>
    );
}

Best Regards,

[Liam-OShea]

@mertsincan Is there a way to create dynamic columns with more advanced filters than the default search filter enabled by setting filter=true in the column? For example create a dropdown toggle filter (like the representatives filter in the docs) in a dynamically created column. I don't understand how to deal with the filter state (selectedOptions) and filterElement in this case.