thechinedu / mui-data-table Goto Github PK
View Code? Open in Web Editor NEWData table for react material-ui
License: MIT License
Data table for react material-ui
License: MIT License
Is there any way to hide the checkboxes in your grid? I see that in the material ui TableHeader and TableBody the following properties for turning on or off checkBoxes. But I don't see any option in your control to accept this flag and turn the checkboxes off. Do you have any suggestions on how to achieve this?
<TableHeader
displaySelectAll={this.state.showCheckboxes}
adjustForCheckbox={this.state.showCheckboxes}
enableSelectAll={this.state.enableSelectAll}
>
<TableBody
displayRowCheckbox={this.state.showCheckboxes}
deselectOnClickaway={this.state.deselectOnClickaway}
showRowHover={this.state.showRowHover}
stripedRows={this.state.stripedRows}
>
If the data is, as in the original example:
const data = [
{ id: 1, name: 'Chikwa Eligson', age: 24, location: 'Lagos', level: 'stage-1', mood: 'happy' },
{ id: 2, name: 'Bamidele Johnson', age: 18, location: 'Anambra', level: 'stage-4', mood: 'anxious' },
{ id: 3, name: 'John Lee', age: 20, location: 'Abuja', level: 'stage-2', mood: 'indifferent' },
{ id: 4, name: 'Binta Pelumi', age: 22, location: 'Jos', level: 'stage-3', mood: 'sad' },
]
Is there a way I could color the 'mood' column so that the 'mood' cell for the 'happy' is green, 'anxious' is yellow, etc.?
how to add mui-data-table multiSelectable property.
Is this already there? I couldn't see it in the documentation.
Hello,
I'm using redux to control all my state changing. All the other components are being re-rendered but the same doesn't happen in the mui-data-table
.
Is there any support for re-rendering?
Is it possible to use an actions button in a column, in which we can have 2 options for edit and delete in each row
Warning PropTypes message appearing in console in development mode:
Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs
Just saying.
Getting the error while installing mui-data-table.
I material-ui installed with version 0.16.1
npm WARN peerDependencies The peer dependency material-ui@^0.15.1 included from mui-data-table will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "mui-data-table"
npm ERR! node v4.4.7
npm ERR! npm v2.15.8
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants material-ui@^0.15.1
If any one want to call the service in every next page click then no other option to override predefined method
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
I get Cannot read property 'object' of undefined
error message when running the demo as shown below. I'm using babel. I've attached my source code below.
Run npm install
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.