[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>
);
}
}
