I am using the react fixed data table.
<Table rowHeight={50} rowsCount={rows.length} width={800} height={300} headerHeight={50}><Column header={<Cell>Name</Cell>} cell={({ rowIndex}) => (<Cell> {rows[rowIndex].userId}</Cell> ) } width={200} /><Column header={<Cell>Description</Cell>} cell={({ rowIndex }) => (<Cell > {rows[rowIndex].description}</Cell> ) } width={200} />
currently it is taking the header name as name(static) and for cell value i need to give the column name.
I have written to show to dynamic header and row value based on json response.
renderTableHeader() { if(this.state.data !== 'undefined'&& this.state.data !==null && this.state.data.length >0) { let header = Object.keys(this.state.data[0]) return header.map((key, index) => { return <th key={index}>{key.toUpperCase()}</th> }) } } renderTableData() { return this.state.data.map((student, index) => { let col = Object.keys(student) return (<tr key={student.id}> {col.map((val, index) => { return <td key={index}>{student[col[index]]}</td> })}</tr> ) }) }
but don't know how to give here.
<Column header={<Cell>Name</Cell>} cell={({ rowIndex}) => (<Cell> {rows[rowIndex].userId}</Cell> ) } width={200} />
Also i want to give the filter options based on my json response, not hardcoded.
class Record extends React.Component {constructor(props){ super(props); this.state = { data: [], selectTableOptions : [], } this.handleTableChange = this.handleTableChange.bind(this); //All these fields i want come as json response this.options = [ { columnField: "Name", type:"text" }, { columnField: "description", type:"text" }, { columnField: "Status", type:"selection" }, { columnText: "Email @", columnField: "Email", type:"text" } ]; this.customAutoComplete = new CustomAutoComplete(this.state.data,this.options);}