Need Documentation create element with javascript and react

[spider58]

Hi,

I'm creating elements with javascript in react.

For example i need to modify a datagrid with,

hidden column
frozen column
button column
slider column

Some examples here but most of examples with no javascript.

for example;

how can i hide a column, (i tried hidden: true doesn't worked)
how can i add a slider in column

with javascript and react?

Thanks.

[jarry]

With this code you can create a DataGrid dynamically. Reset the 'columns' state to re-render the DataGrid.

Code:

<DataGrid data={this.state.data} style={{height:250}}>
  {
    this.state.columns.map((col,index) => (
      <GridColumn key={index} {...col}></GridColumn>
    ))
  }
</DataGrid>

[spider58]

With this code you can create a DataGrid dynamically. Reset the 'columns' state to re-render the DataGrid.

Code:

<DataGrid data={this.state.data} style={{height:250}}>
  {
    this.state.columns.map((col,index) => (
      <GridColumn key={index} {...col}></GridColumn>
    ))
  }
</DataGrid>

Thanks for reply. Yes i already using this code i got it from sample react nested grid code.

defining columns in state

Code:

columns: [
      {
               field: 'id',
               title: 'userid',
               hidden: true ----------->>>> doesnt worked
        }
      {
               field: 'name',
               title: 'username',
               width: 200,
               formatter: function(value) { --------------------------------->>> formatter doesnt worked
                         return "<button>value</button>"
               }
        }
]

[jarry]

The GridColumn has no 'hidden' and 'formatter' properties. Please define the 'render' function to render the body cell.

Code:

{field:'name',title:'Name',width:100,
  render: ({row})=>(
    <button>{row.name}</button>
  )
},

To hide a column, you must remove it from the 'columns' state.

The GridColumn documentation is available from https://www.jeasyui.com/documentation5/GridColumn.php

[spider58]

thanks