DataTable with 'dynamic Columns' edit optimization

UI Components for React
Post Reply
rajan_m
Posts: 5
Joined: 01 Feb 2010, 13:59

17 Nov 2020, 13:08

Created DataTable with dynamic columns, which includes editor option. Edit operation takes time. Would appreciate your help

[EDIT] Simplified code

Code: Select all

import React from 'react';
import './App.css';

import { DataTable } from 'primereact/datatable';
import { Column, ColumnProps } from 'primereact/column';
import { InputText } from 'primereact/inputtext';
import { Dropdown } from 'primereact/dropdown';

import * as faker from 'faker';

import 'primereact/resources/primereact.min.css';
import 'primereact/resources/themes/nova-light/theme.css';
import 'primeicons/primeicons.css';


interface Job {
    groupId:string
    id:number
    organisation:string
    department: string
    salary: string
    experiance: number
    [key: string]: any;
}


const initializeJobs = () => {
    let jobs:Job[] = []
    let index:number = 0
    for(let i=0;i<200;i++){
        let name:string = faker.name.findName()
        let count:number = faker.random.number(5)
        for(let j=index;j<count+index;j++){
            const job:Job = {
                groupId:name,
                id:j,
                organisation: faker.company.companyName(),
                department: faker.company.bsNoun(),
                salary: faker.finance.amount(10000,100000),
                experiance: faker.random.number(10)
            }
            jobs.push(job)
        }
        index = index + count
    }
    return jobs
}

const initializeExpand = (jobs:Job[]) => {
    let expanded:any = {}
    jobs.forEach((job) => {
        expanded[job.groupId]=true
    })
    return expanded
}

export const PlainTable : React.FC = () => {
    
    const [ jobs, setJobs ] = React.useState<Job[]>(()=>{ return initializeJobs() })
    const [ columns, setColumns ] = React.useState<ColumnProps[]>([])
    const [ expandedRows, setExpandedRows ] = React.useState<any[]>(()=>{ return initializeExpand(jobs) })


    React.useEffect(()=>{
        //table editor
        const getEditor = (key:string, props: any) => {
            const onEdit = (props:any, key:string, value:any) => {
                let updatedJobs:Job[] = [...jobs];
                updatedJobs[props.rowIndex] = { ...updatedJobs[props.rowIndex], [key]:value }
                setJobs(updatedJobs);//dispatch
            }                  
            return <InputText value={jobs[props.rowData.id][key]} onChange={(e) => onEdit(props, key, e.currentTarget.value)} />
        }
        //table columns
        let config = jobs[0]
        let columnsData:ColumnProps[] = Object.keys(config).map(key => {
            return { /*field:key ,*/
                     header:(key==="groupId")?"":key.toUpperCase(), 
                     body:(data:Job) => { return (key==="groupId")?"":jobs[data.id][key] },
                     editor:(props:any) => { return getEditor(key, props) },
                     style:{width: (key==="groupId")?"0%":"20%"} }
        });
        setColumns(columnsData)   
        console.log("effect>jobs")
    },[jobs/*,dispatch*/])


    const headerTemplate = (data:Job) => {
        return  <span>{data.groupId}</span>
    }

    const footerTemplate = (data:Job) => {
        return <td></td>
    }

    const expander = (e:any) => {
        setExpandedRows(e.data)
    }

    const emptyBody = () => {

    }


    return (            
        <DataTable value={jobs} scrollable scrollHeight="100%" 
        rowGroupMode="subheader" groupField="groupId" rowGroupHeaderTemplate={headerTemplate} rowGroupFooterTemplate={footerTemplate}
        expandableRowGroups expandedRows={expandedRows} onRowToggle={expander} dataKey={"id"}>
            {   columns.map((col,i) => {
                    console.log("render>columns")
                    return <Column key={i} {...col} />;
                })
            }
        </DataTable> 
    );
}

}
Note: Table has 'rowGroupMode' with field 'groupId' and is hidden.

mert.sincan
Posts: 4473
Joined: 29 Jun 2013, 12:38

19 Nov 2020, 14:17

Hi,

Could you please try the following sample?
https://codesandbox.io/s/green-fire-qcg ... xtDemo.tsx

Best Regards,

rajan_m
Posts: 5
Joined: 01 Feb 2010, 13:59

20 Nov 2020, 13:56

Thanks @mert.sincan for the help. I've tried your sample but I'm unable to see the difference, it still takes ~2Sec for editing :-(

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest