thechinedu / mui-data-table Goto Github PK

View Code? Open in Web Editor NEW

82.0 82.0 26.0 884 KB

Data table for react material-ui

License: MIT License

JavaScript 100.00%

mui-data-table's People

Stargazers

Watchers

mui-data-table's Issues

Any way to hide the checkboxes?

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}
          >

How to color a cell dynamically based on criteria?

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.?

multiSelectable true property

how to add mui-data-table multiSelectable property.

Need the property "deselectOnClickaway"

Is this already there? I couldn't see it in the documentation.

Re-render on state changing

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?

The demo is not working, its shows 404. I want to use custom renderer for columns.

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

PropTypes via the main React package is deprecated

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

This library useless without column sorting

Just saying.

npm ERR! peerinvalid Peer [email protected] wants material-ui@^0.15.1

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

How to override the pagination(navigateRight)

If any one want to call the service in every next page click then no other option to override predefined method

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

Demo is not working. Cannot read property 'object' of undefined

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

test-react.zip

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.