How to use filter API?

mafridi

I'm able to generate data inside of datatables using the React framework. I need assistance figuring out how to only display the rows that don't have a blank value for the 'Name' field, which is column 0.

This is my function that generates the datatable:

useEffect(() => {
    let table = new DataTable('#datatable', {
        data: props.props,
        columns: [
            // { title: "Peer", data: "peer" },
            { title: "Name", data: "name" },
            { title: "Address", data: "address" },
            { title: "City", data: "city" },
            { title: "State", data: "state" },
            { title: "Zip", data: "zipCode" }
        ],
        layout: {
            topStart: {
                buttons: ['copy']
            },
            top2Start: 'pageLength'
        },
        destroy: true
    })
    let filteredData = table
        .columns([0, 1])
        .data()
        .flatten()
        .filter(function (value, index) {
            return value ? true : false
        })

    console.log(filteredData)

}, [props])

When I console.log the output of filteredData I see column 0, 'Name', of each row that is not blank. How can I send this data back to datatables and display only rows that don't have a blank in column 0, the 'Name' column?

kthorngren

If you don't ever want to show those rows then the best option is to remove them from the props.props array before initializing Datatables.

If you want them in the Datatables but not displayed you can use column().search.fixed(). Provide the user the ability to set/reset a flag to display blank names and check the flag in the column().search.fixed() function to determine if blank names should be shown.

To answer your question you would use clear() then rows.add() to clear the original data and update the table with the filteredData. This would be the less efficient than just removing the unwanted data before initializing Datatables.

Kevin