mui-data-table
mui-data-table copied to clipboard
Published
20 hours ago •
thechinedu
thechinedu
Passing table properties
I think this plugin rocks, but passing data and table elements through the config is restricting. Unless you have another way to do it. I need to be able to have more control over the TableRow and TableBody to apply properties such as deselectOnClickAway, didplayRowCheckBox, selectable, etc. Also I am using a custom way of theming that is not exactly the way MuiTheme does it and it doesn't let me pass the colorOption props to the config. And lastly, how can I initially display more than 5 rows in the pagination? 5 rows is too few and requires more clicking. The code below explains how I am passing colorOptions in my JSX
`
import React from 'react';
import { connect } from 'react-redux';
import classnames from 'classnames';
import QueueAnim from 'rc-queue-anim';
import { Row, Col, getRowProps, getColumnProps } from 'react-flexbox-grid';
import { Scrollbars } from 'react-custom-scrollbars';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import Label from 'material-ui/TextField';
import {List, ListItem} from 'material-ui/List';
import Toggle from 'material-ui/Toggle';
import Avatar from 'material-ui/Avatar';
import {Link, hashHistory} from 'react-router';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import ActionInfoOutline from 'material-ui/svg-icons/action/info-outline';
import ActionDeleteForever from 'material-ui/svg-icons/action/delete-forever';
import AvPlaylistPlay from 'material-ui/svg-icons/av/playlist-play';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
import { MuiDataTable } from 'mui-data-table';
import SelectField from 'material-ui/SelectField';
import FilterList from 'material-ui/svg-icons/content/filter-list';
import SearchIcon from 'material-ui/svg-icons/action/search';
import NavigateRight from 'material-ui/svg-icons/image/navigate-next';
import NavigateLeft from 'material-ui/svg-icons/image/navigate-before';
const MEDIAS = require('data/medias.js');
const mediaData = MEDIAS['mediaItems'];
const mediaTableScrollBarsStyle = {
height:"100vh",
maxHeight: "561px",
};
const colWidth = {
width: '6rem',
overflow: 'hidden',
whiteSpace: 'normal',
textOverflow: 'none',
textAlign:'center',
padding: '0',
};
const colFlexWidth = {
padding: '0',
};
const colWidthMed = {
width: '7rem',
overflow: 'hidden',
whiteSpace: 'normal',
textOverflow: 'none',
textAlign:'center',
paddingLeft: '0',
};
const config = {
paginated: true,
data: mediaData,
columns: [
{ title: 'Image', renderAs: function (data) {
return <span><Avatar src={data.images[0].url} size={40} /></span>;
}},
{ title: 'Name', renderAs: function (data) {
return <span>{data.name}</span>;
}},
{ title: 'Type', renderAs: function (data) {
return <span><i className="material-icons typeicon">{data.typeicon}</i></span>;
}},
{ title: 'Approval', renderAs: function (data) {
return <span><i className={data.approvalcolor}>{data.approvalicon}</i></span>;
}},
{ title: 'Info', renderAs: function (data, colorOption) {
return <span className="center-flex" onClick={(e) => {e.stopPropagation()}}>
<IconMenu
iconButtonElement={<IconButton><ActionInfoOutline /></IconButton>}
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}>
<MenuItem
className={classnames('menu-item', {
'bg-color-medlight': ['11', '12', '13', '14', '15', '16'].indexOf(colorOption) >= 0,
'bg-color-meddark': ['21', '22', '23', '24', '25', '26'].indexOf(colorOption) >= 0
})}
style={{textAlign: 'center'}}>
<Avatar style={{position: 'relative', top: '8px'}} src={data.images[0].url} size={40} />
</MenuItem>
<MenuItem className="menu-item">
<p><span>Size: </span> {data.detailType}</p>
</MenuItem>
<MenuItem className="menu-item">
<p><span>Dimmensions: </span> {data.detailDimensions}</p>
</MenuItem>
</IconMenu>
</span>;
}},
{ title: 'Actions', renderAs: function (data) {
return <span className="center-flex" onClick={(e) => {e.stopPropagation()}}>
<IconMenu
iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}>
<MenuItem className="menu-item"
leftIcon={<AvPlaylistPlay />}>
Add to Playlist
</MenuItem>
<MenuItem className="menu-item"
leftIcon={<ActionDeleteForever />}>
Delete
</MenuItem>
</IconMenu>
</span>;
}},
]
};
class MediasTable extends React.Component {
constructor(props) {
super(props);
this.state = {
showRowHover: true,
selectable: true,
fixedHeader: true,
hovered: true,
height: '300px',
showCheckboxes: true,
selectable: true,
multiSelectable: true,
enableSelectAll: true,
open: false,
};
}
render() {
const { colorOption } = this.props;
return (
<QueueAnim type="right" className="ui-animate main-content has-sidebar">
<div key="1" className="row">
<div className="box">
<MuiDataTable config={config} />
<Table
fixedHeader={this.state.fixedHeader}
selectable={this.state.selectable}
multiSelectable={this.state.multiSelectable}
enableSelectAll={this.state.enableSelectAll}
hovered={this.state.hovered}
displayRowCheckbox={this.state.showCheckboxes}
deselectOnClickaway={this.state.deselectOnClickaway}
showRowHover={this.state.showRowHover}
className="media-table">
<TableHeader
displaySelectAll={this.state.showCheckboxes}>
<TableRow>
<TableHeaderColumn style={colWidthMed}>Image</TableHeaderColumn>
<TableHeaderColumn style={colFlexWidth}>Name</TableHeaderColumn>
<TableHeaderColumn style={colWidth}>Type</TableHeaderColumn>
<TableHeaderColumn style={colWidth}>Approved</TableHeaderColumn>
<TableHeaderColumn style={colWidth}>Info</TableHeaderColumn>
<TableHeaderColumn style={colWidth}>Actions</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody>
{mediaData.map( (row, index) => (
<TableRow
key={index}>
<TableRowColumn style={colWidthMed}>
<span className="center-flex" onClick={(e) => {e.stopPropagation()}}>
<Avatar src={row.images[0].url} size={40} />
</span>
</TableRowColumn>
<TableRowColumn style={colFlexWidth}>
<span className="start-flex" onClick={(e) => {e.stopPropagation()}}>
{row.name}
</span>
</TableRowColumn>
<TableRowColumn style={colWidth}>
<span className="center-flex" onClick={(e) => {e.stopPropagation()}}>
<i className="material-icons typeicon">{row.typeicon}</i>
</span>
</TableRowColumn>
<TableRowColumn style={colWidth}>
<span className="center-flex" onClick={(e) => {e.stopPropagation()}}>
<i className={row.approvalcolor}>{row.approvalicon}</i>
</span>
</TableRowColumn>
<TableRowColumn style={colWidth}>
<span className="center-flex" onClick={(e) => {e.stopPropagation()}}>
<IconMenu
iconButtonElement={<IconButton><ActionInfoOutline /></IconButton>}
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}>
<MenuItem
className={classnames('menu-item', {
'bg-color-medlight': ['11', '12', '13', '14', '15', '16'].indexOf(colorOption) >= 0,
'bg-color-meddark': ['21', '22', '23', '24', '25', '26'].indexOf(colorOption) >= 0
})}
style={{textAlign: 'center'}}>
<Avatar
style={{position: 'relative', top: '8px'}}
src={row.images[0].url} size={40} />
</MenuItem>
<MenuItem
className={classnames('menu-item', {
'bg-color-medlight': ['11', '12', '13', '14', '15', '16'].indexOf(colorOption) >= 0,
'bg-color-meddark': ['21', '22', '23', '24', '25', '26'].indexOf(colorOption) >= 0
})}>
<p><span>Size: </span> {row.detailType}</p>
</MenuItem>
<MenuItem
className={classnames('menu-item', {
'bg-color-medlight': ['11', '12', '13', '14', '15', '16'].indexOf(colorOption) >= 0,
'bg-color-meddark': ['21', '22', '23', '24', '25', '26'].indexOf(colorOption) >= 0
})}>
<p><span>Dimmensions: </span> {row.detailDimensions}</p>
</MenuItem>
<MenuItem
className={classnames('menu-item', {
'bg-color-medlight': ['11', '12', '13', '14', '15', '16'].indexOf(colorOption) >= 0,
'bg-color-meddark': ['21', '22', '23', '24', '25', '26'].indexOf(colorOption) >= 0
})}>
<p><span>Duration: </span> {row.detailDuration}</p>
</MenuItem>
<MenuItem
className={classnames('menu-item', {
'bg-color-medlight': ['11', '12', '13', '14', '15', '16'].indexOf(colorOption) >= 0,
'bg-color-meddark': ['21', '22', '23', '24', '25', '26'].indexOf(colorOption) >= 0
})}>
<p><span>Folder: </span> {row.detailFolder}</p>
</MenuItem>
<MenuItem
className={classnames('menu-item', {
'bg-color-medlight': ['11', '12', '13', '14', '15', '16'].indexOf(colorOption) >= 0,
'bg-color-meddark': ['21', '22', '23', '24', '25', '26'].indexOf(colorOption) >= 0
})}>
<p><span>Revisions: </span> {row.modifiedRevision}</p>
</MenuItem>
</IconMenu>
</span>
</TableRowColumn>
<TableRowColumn style={colWidth}>
<span className="center-flex" onClick={(e) => {e.stopPropagation()}}>
<IconMenu
iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}>
<MenuItem
className={classnames('menu-item', {
'bg-color-medlight': ['11', '12', '13', '14', '15', '16'].indexOf(colorOption) >= 0,
'bg-color-meddark': ['21', '22', '23', '24', '25', '26'].indexOf(colorOption) >= 0
})}
leftIcon={<AvPlaylistPlay />}>
Add to Playlist
</MenuItem>
<MenuItem
className={classnames('menu-item danger-bg', {
'bg-color-medlight': ['11', '12', '13', '14', '15', '16'].indexOf(colorOption) >= 0,
'bg-color-meddark': ['21', '22', '23', '24', '25', '26'].indexOf(colorOption) >= 0
})}
leftIcon={<ActionDeleteForever />}>
Delete
</MenuItem>
</IconMenu>
</span>
</TableRowColumn>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
</QueueAnim>
);
}
}
const mapStateToProps = state => ({
colorOption: state.settings.colorOption
});
module.exports = connect(
mapStateToProps
)(MediasTable);`
I tried moving the const { colorOption } = this.props; line outside of the class for a more global scope but it fails
