render() { // const { rowIndex, field, data, ...props } = this.props; const { rowIndex, field, columnKey, data, ...props } = this.props; return <Cell {...props}>{data[rowIndex][columnKey]}</Cell>; }
// const MyCustomCell = ({ rowIndex, field, data, special, ...props }) => ( const MyCustomCell = ({ rowIndex, field, columnKey, data, ...props }) => ( <Cell>{data[rowIndex].special ? "I'm special" : "I'm not special"}</Cell> )
render() { const { data, rowIndex, columnKey, dataVersion, ...props } = this.props; const rowObject = data.getObjectAt(rowIndex); return ( <Cell {...props}> {rowObject ? ( // <ExampleImage src={rowObject['avatar']} /> <ImageCell {...this.props} /> ) : ( <img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /> )} </Cell> ); }
render() { return ( <Table rowsCount={this.state.myTableData.length} rowHeight={50} height={500} <Column header={<Cell>Name</Cell>} columnKey={'name'} width={200} /> <Column header={<Cell>Email</Cell>} columnKey={'email'} cell={<MyLinkCell data={this.state.myTableData} field="email" />} width={300} /> <Column header={'Special or Not'} columnKey={'special'}
render() { const {data, rowIndex, columnKey, ...props} = this.props; // Hacky workaround to make filtered sorts work // This should be fixed rendering the sorted filter // so that this can just call data.getObjectAt(index) function getDataObjectAt(data, index) { if (Array.isArray(data)) { return data[index]; } return data.getObjectAt(index); } return ( <Cell {...props}> {getDataObjectAt(data, rowIndex)[columnKey]} </Cell> ); }
<Table rowHeight={120} rowsCount={pagedData.getSize()} <Column header={<Cell></Cell>} cell={({ rowIndex }) => <Cell>{rowIndex}</Cell>} fixed={true} width={50} /> <Column header={<Cell></Cell>} columnKey="avatar" cell={<PagedImageCell data={pagedData} />} height={200} ></Column> <Column columnKey="firstName" header={<Cell>First Name</Cell>} cell={<PagedCell data={pagedData} />} fixed={true} width={100} /> <Column columnKey="lastName" header={<Cell>Last Name</Cell>} cell={<PagedCell data={pagedData} />} fixed={true}
render() { const {onSortChange, sortDir, children, ...props} = this.props; return ( <Cell {...props}> <a onClick={this.onSortChange}> {children} {sortDir ? (sortDir === SortTypes.DESC ? '↓' : '↑') : ''} </a> </Cell> ); }
<br /> <br /> <Table rowHeight={50} rowsCount={sortedSongList.getAll().filter(e => filteredSongList.getAll().indexOf(e) !== -1).length} height={1000} {...this.props}> <Column columnKey="title" header={ <Column columnKey="artist" header={ <Column columnKey="album" header={ <Column columnKey="trackNumber" header={ <Column columnKey="year" header={
render() { const { data, rowIndex, columnKey, dataVersion, ...props } = this.props; const rowObject = data.getObjectAt(rowIndex); return ( <Cell {...props}> {rowObject ? ( rowObject[columnKey] ) : ( <img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /> )} </Cell> ); }
render() { // const { rowIndex, field, data, ...props } = this.props; const { rowIndex, field, columnKey, data, ...props } = this.props; const link = data[rowIndex][columnKey]; return ( <Cell {...props}> <a href={link}>{link}</a> </Cell> ); }