how can i put the selected state in tree data by first render

Question

i use material-table and i want render the permission tree with material-table tree data

my data may like this

[
    {
      id: 1,
      name: 'a',
      type: 'adult',
      selected:true,
    },
    {
      id: 2,
      name: 'b',
      parentId: 1,
      selected:true,
    },
    {
      id: 3,
      name: 'c',
      parentId: 1,
      selected:true,
    },
    {
      id: 4,
      name: 'd',
      parentId: 3,
      selected:false
    },
    {
      id: 5,
      name: 'e',
      selected:false
    }
]

and how can i control the left checkbox selected

Screen shot of table

mehmet baran · Answer 1 · 2019-04-12T05:43:57.837

1

You should give a function to MaterialTable for how a parent would be set. For your example:

<MaterialTable
parentChildData={(row, rows) => rows.find(a => a.id === row.parentId)}
....
/>

To make rows default checked:

{ id: 5, name: 'e', tableData: { checked: true } }

edited Apr 12 '19 at 05:43

answered Apr 11 '19 at 13:01

mehmet baran

636
8
18

no,no im not mean that ， i saw your example in github，i'm sorry for my poor English, ,i want default(init) the selected status – symnetry lamp Apr 12 '19 at 02:59
use tableData instead of selected: { id: 5, name: 'e', tableData: { checked: true } } – mehmet baran Apr 12 '19 at 04:30
1

wow,that good ,it's more easier than my way ，thank you for your kind help – symnetry lamp Apr 12 '19 at 05:32

score 0 · Answer 2 · answered Apr 12 '19 at 04:08

i read some issues ,i found i can set "tableRef" in MaterialTable and set the checked status at the first time ,thank you always

<MaterialTable
    tableRef={this.tableRolesRef}  //this.tableRolesRef=React.createRef();
    columns={[
        {title:"viewname",field:"viewname",sorting:false},
        {title:"modelname",field:"modelname",sorting:false,cellStyle:{whiteSpace:'nowrap'}},
        {title:"parentid",field:"parentid",sorting:false},
        {title:"id",field:"id",sorting:false},
        {title:"filename",field:"filename",sorting:false},
        {title:"version",field:"version",sorting:false},

    ]}
    actions={[
        {
            icon:'toggle_on',
            tooltip:'open',
            onClick:(event,rows)=>{console.log(rows,this.tableRef)}
        }
    ]}
    data={modules}
    title="permission"
    parentChildData={(row, rows) => rows.find(a => a.id === row.parentid)}
    onSelectionChange={data=>{console.log(data)}}
    options={{
        actionsColumnIndex:-1,
        toolbar:true,
        paging:true,
        selection:true
    }}
    localization={{...localization}}
/>

and in componentDidMount get my response

        redFetch(`rolepermission?roleid=${id}`)
            .then(res=>{
                this.setState({rolepermission:res})
                console.log(res)
                let renderData=this.tableRolesRef.current.state.renderData
                //renderData[0].tableData.checked=true
                //this.tableRolesRef.current.setState({renderData}) ←that is what i want to set
                console.log(this.tableRolesRef)

            })

how can i put the selected state in tree data by first render

2 Answers2