javascript - handleClick on row and checkbox in datatable -
updated use material ui next, table component, , table stateless component, , have constructor component enhancedtable. in table component when go map through data, need check if selected props(array) has same item on data array . how should check const isselected = selected.includes(item) when map through data array. when click catch error selected.includes not function
unselectselected={() => onselect(selected =>{ debugger console.log(selected)})} table component
let defaultcellrenderer = ({item, key}) => item[key] const table = props => { const {data, columns, children, selectable, order, selected, onselect, ondelete, onsearch, onduplicate, onsort, search, onunselectall} = props return ( <div> {selectable && <enhancedtabletoolbar numselected={selected.length} handlesearch={() => onsearch(data)} value={search} // unselectselected={() => onunselectall(selected)} unselectselected={() => onselect(selected =>{ debugger console.log(selected)})} deleteselected={() => ondelete(selected)} duplicateselected={() => onduplicate(selected)} /> } <muitable > {selectable ? <enhancedtablehead columns={columns} numselected={selected.length} order={order} // onselectallclick={() => onselect(object.keys(new array(selected.length).fill(0)))} onselectallclick={() => onselect( console.log('click') )} onrequestsort={property => event => onsort(event, property)} /> : <tablehead> <tablerow > {columns.map(({label}) => <tablecell> {label} </tablecell>)} </tablerow> </tablehead> } <tablebody> {data.map((item, index) => { // debugger const isselected = selected.includes(item) debugger return ( selectable ? <tablerow hover onclick={() => onselect(isselected ? selected.filter(x => x != item) : [...selected, item])} role="checkbox" aria-checked={isselected} tabindex="-1" key={index} selected={isselected} > <tablecell checkbox> <checkbox checked={isselected}/> </tablecell> {columns.map(({key, cellrenderer, numeric}) => <tablecell key={key} numeric={numeric}> {(cellrenderer || defaultcellrenderer)({item, key})} </tablecell>)} </tablerow> : <tablerow hover> {columns.map(({key, cellrenderer, numeric}) => <tablecell numeric={numeric}> {(cellrenderer || defaultcellrenderer)({item, key})} </tablecell>)} </tablerow> ) })} </tablebody> </muitable> </div> ) } enchancedtable
class enhancedtable extends component { state = { selected: [], data, order: { direction: 'asc', by: 'deviceid', }, search: '', } handlerequestsort = (event, property) => { const orderby = property let order = 'desc' if (this.state.order.by === property && this.state.order.direction === 'desc') { order = 'asc' } const data = this.state.data.sort( (a, b) => order === 'desc' ? b[orderby] > a[orderby] : a[orderby] > b[orderby], ) this.setstate({ data, order }) } deleteselected = () => { const {data, selected} = this.state this.setstate({data: data.filter(item => !selected.includes(item)), selected: []}) } handlesearch = event => { const {data} = this.state let filtereddatas = [] filtereddatas = data.filter(e => { let matheditems = object.values(e) let returneditems matheditems.foreach(e => { const regex = new regexp(event.target.value, 'gi') if (typeof e == 'string') returneditems = e.match(regex) }) return returneditems }) this.setstate({filterdata: filtereddatas, search: event.target.value}) } unselectselected = () => { this.setstate({selected: []}) } duplicate = () => { const {data, selected} = this.state this.setstate({ // data: data.filter((item, index) => selected.includes(index)).reduce((p, c) => [...p, {...data[index]}], data), data : [...data, ...selected], selected: [], }) } handleselectchange = selected => { this.setstate({selected}) } render = () => { const {selected, data, search, order} = this.state return ( <paper> <table data={data} selectable columns={columns} order={order} search={search} selected={selected} onselect={this.handleselectchange} ondelete= {this.deleteselected} onsort={this.handlerequestsort} onduplicate={this.duplicate} onsearch={this.handlesearch} // test unselect onunselectall = {this.unselectselected} /> </paper>) } }
it seems me you've got several things wrong ( , few things maybe strange) here. because don't know structure of data in example can't tell if check here const isselected = selected.includes(item) working or not. if item in data array single value work. example if had:
const data = [ 1,2,3,4 ] and
const selected = [1,2] you check way doing , work. const isselected = selected.includes(item)
but if data example object array like:
const data = [ {id: 1},{id: 2},{id: 3} ] and
const selected = [{id:1}] then need check id value this:
const isselected = selected.some((i) => i.id === item.id ) and looks not setting selected new value when filter in onclick method why you're getting selected.includes not function error. should doing instead.
onclick={() => onselect(isselected ? selected = selected.filter(x => x != item) : [...selected, item])} i'm not sure why don't have onselect method handle both select , unselect of row. like:
onclick={() => this.onselect()} and outside render method:
onselect() { isselected ? selected = selected.filter(x => x != item) : [...selected, item] } hope helps.
Comments
Post a Comment