How to show dynamic options , rows and column in react fixed data table

561 Views Asked by At

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

There are 0 best solutions below