Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

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

$
0
0

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

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>