Possible optimizations

I've noticed that in DynamicDataTable.jsx getFields there is a lot of for loops. I feel that this can be written nicer by using pre-existing JavaScript functions such as Array.prototype.forEach. I think the logic can also be simplified.

Here's what I've come up with:

rows.forEach(row => {
    Object.keys(row).forEach(rowFieldName => {
        fields.forEach(field => {
            if(field.name === rowFieldName) {
                const label = rowFieldName.replace(new RegExp('_', 'g'), ' ').trim();

                fields.push({
                    name: rowFieldName,
                    label,
                });
            }
        })
    })
})

Here's what is there:

for (let i = 0; i < rows.length; i++) {
    const row = rows[i];

    const rowFields = Object.keys(row);

    for (let j = 0; j < rowFields.length; j++) {
        const rowFieldName = rowFields[j];
        let exists = false;

        for (let k = 0; k < fields.length; k++) {
            const field = fields[k];

            if (field.name === rowFieldName) {
                exists = true;
                break;
            }
        }

        if (!exists) {
            const label = rowFieldName.replace(new RegExp('_', 'g'), ' ').trim();

            fields.push({
                name: rowFieldName,
                label,
            });
        }
    }
}

I personally think that we should be pushing to use existing JavaScript functions as much as possible which'll make code more compact and in my opinion easier to read.

Thoughts?

cc @DivineOmega @wheatleyjj

Start in src/DynamicDataTable.jsx at getFields and compare the existing nested loops with the proposed array-method approach. The work is done when the logic is simpler while preserving the current field discovery, duplicate handling, and generated labels.