(this.announceRef = el)}>
+
+
(this.announceRef = el)}>
{announceText}
@@ -958,4 +973,4 @@ class MUIDataTable extends React.Component {
}
}
-export default withStyles(defaultTableStyles, { name: "MUIDataTable" })(MUIDataTable);
+export default withStyles(defaultTableStyles, { name: 'MUIDataTable' })(MUIDataTable);
diff --git a/src/MUIDataTableBody.js b/src/MUIDataTableBody.js
deleted file mode 100644
index c1885edbb..000000000
--- a/src/MUIDataTableBody.js
+++ /dev/null
@@ -1,156 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import Typography from "@material-ui/core/Typography";
-import TableBody from "@material-ui/core/TableBody";
-import MUIDataTableBodyCell from "./MUIDataTableBodyCell";
-import MUIDataTableBodyRow from "./MUIDataTableBodyRow";
-import MUIDataTableSelectCell from "./MUIDataTableSelectCell";
-import { withStyles } from "@material-ui/core/styles";
-
-const defaultBodyStyles = {
- root: {},
- emptyTitle: {
- textAlign: "center",
- },
-};
-
-class MUIDataTableBody extends React.Component {
- static propTypes = {
- /** Data used to describe table */
- data: PropTypes.array.isRequired,
- /** Total number of data rows */
- count: PropTypes.number.isRequired,
- /** Columns used to describe table */
- columns: PropTypes.array.isRequired,
- /** Options used to describe table */
- options: PropTypes.object.isRequired,
- /** Data used to filter table against */
- filterList: PropTypes.array,
- /** Callback to execute when row is clicked */
- onRowClick: PropTypes.func,
- /** Table rows selected */
- selectedRows: PropTypes.object,
- /** Callback to trigger table row select */
- selectRowUpdate: PropTypes.func,
- /** Data used to search table against */
- searchText: PropTypes.string,
- /** Extend the style applied to components */
- classes: PropTypes.object,
- };
-
- buildRows() {
- const { data, page, rowsPerPage, count } = this.props;
-
- if (this.props.options.serverSide) return data;
-
- let rows = [];
- const totalPages = Math.floor(count / rowsPerPage);
- const fromIndex = page === 0 ? 0 : page * rowsPerPage;
- const toIndex = Math.min(count, (page + 1) * rowsPerPage);
-
- if (page > totalPages && totalPages !== 0) {
- throw new Error(
- "Provided options.page of `" +
- page +
- "` is greater than the total available page length of `" +
- totalPages +
- "`",
- );
- }
-
- for (let rowIndex = fromIndex; rowIndex < count && rowIndex < toIndex; rowIndex++) {
- if (data[rowIndex] !== undefined) rows.push(data[rowIndex]);
- }
-
- return rows.length ? rows : null;
- }
-
- getRowIndex(index) {
- const { page, rowsPerPage, options } = this.props;
-
- if (options.serverSide) {
- return index;
- }
-
- const startIndex = page === 0 ? 0 : page * rowsPerPage;
- return startIndex + index;
- }
-
- isRowSelected(dataIndex) {
- const { selectedRows } = this.props;
- return selectedRows.lookup && selectedRows.lookup[dataIndex] ? true : false;
- }
-
- handleRowSelect = data => {
- this.props.selectRowUpdate("cell", data);
- };
-
- render() {
- const { classes, columns, options } = this.props;
- const tableRows = this.buildRows();
-
- if (tableRows) {
- return (
-
- {tableRows.map(({ data: row, dataIndex }, rowIndex) => (
-
- {options.selectableRows && (
-
- )}
- {row.map(
- (column, columnIndex) =>
- columns[columnIndex].display === "true" && (
-
- {column}
-
- ),
- )}
-
- ))}
-
- );
- }
-
- return (
-
- {
-
-
-
- {options.textLabels.body.noMatch}
-
-
-
- }
-
- );
- }
-}
-
-export default withStyles(defaultBodyStyles, { name: "MUIDataTableBody" })(MUIDataTableBody);
diff --git a/src/MUIDataTableSelectCell.js b/src/MUIDataTableSelectCell.js
deleted file mode 100644
index e19f7cb44..000000000
--- a/src/MUIDataTableSelectCell.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-import Checkbox from "@material-ui/core/Checkbox";
-import TableCell from "@material-ui/core/TableCell";
-import { withStyles } from "@material-ui/core/styles";
-
-const defaultSelectCellStyles = theme => ({
- root: {
- [theme.breakpoints.down("sm")]: {
- display: "none",
- },
- },
- fixedHeader: {
- position: "sticky",
- top: "0px",
- left: "0px",
- zIndex: 100,
- backgroundColor: "#FFF",
- },
- headerCell: {
- zIndex: 110,
- },
- checkboxRoot: {
- "&$checked": {
- color: "#027cb5",
- },
- },
- checked: {},
- disabled: {},
-});
-
-class MUIDataTableSelectCell extends React.Component {
- static propTypes = {
- /** Select cell checked on/off */
- checked: PropTypes.bool.isRequired,
- /** Select cell part of fixed header */
- fixedHeader: PropTypes.bool.isRequired,
- /** Callback to trigger cell update */
- onChange: PropTypes.func,
- /** Extend the style applied to components */
- classes: PropTypes.object,
- };
-
- static defaultProps = {
- isHeaderCell: false,
- };
-
- render() {
- const { classes, fixedHeader, isHeaderCell, ...otherProps } = this.props;
-
- const cellClass = classNames({
- [classes.root]: true,
- [classes.fixedHeader]: fixedHeader,
- [classes.headerCell]: isHeaderCell,
- });
-
- return (
-
-
-
- );
- }
-}
-
-export default withStyles(defaultSelectCellStyles, { name: "MUIDataTableSelectCell" })(MUIDataTableSelectCell);
diff --git a/src/MUIDataTableToolbar.js b/src/MUIDataTableToolbar.js
deleted file mode 100644
index ee36f9360..000000000
--- a/src/MUIDataTableToolbar.js
+++ /dev/null
@@ -1,268 +0,0 @@
-import React from "react";
-import Typography from "@material-ui/core/Typography";
-import Toolbar from "@material-ui/core/Toolbar";
-import Tooltip from "@material-ui/core/Tooltip";
-import IconButton from "@material-ui/core/IconButton";
-import MUIDataTableFilter from "./MUIDataTableFilter";
-import MUIDataTableViewCol from "./MUIDataTableViewCol";
-import MUIDataTableSearch from "./MUIDataTableSearch";
-import SearchIcon from "@material-ui/icons/Search";
-import DownloadIcon from "@material-ui/icons/CloudDownload";
-import PrintIcon from "@material-ui/icons/Print";
-import ViewColumnIcon from "@material-ui/icons/ViewColumn";
-import FilterIcon from "@material-ui/icons/FilterList";
-import ReactToPrint from "react-to-print";
-import styled from "./styled";
-import MUIDataTablePopoverWrapper from "./MUIPopover/MUIDataTablePopoverWrapper";
-
-export const defaultToolbarStyles = (theme, props) => ({
- root: {},
- left: {
- flex: "1 1 55%",
- },
- actions: {
- flex: "0 0 45%",
- textAlign: "right",
- },
- titleRoot: {},
- titleText: {},
- icon: {
- "&:hover": {
- color: "#307BB0",
- },
- },
- iconActive: {
- color: "#307BB0",
- },
- searchIcon: {
- display: "inline-flex",
- marginTop: "10px",
- marginRight: "8px",
- },
- ...(props.options.responsive ? { ...responsiveToolbarStyles(theme) } : {}),
-});
-
-export const responsiveToolbarStyles = theme => ({
- [theme.breakpoints.down("sm")]: {
- titleRoot: {},
- titleText: {
- fontSize: "16px",
- },
- spacer: {
- display: "none",
- },
- left: {
- // flex: "1 1 40%",
- padding: "8px 0px",
- },
- actions: {
- // flex: "1 1 60%",
- textAlign: "right",
- },
- },
- [theme.breakpoints.down("xs")]: {
- root: {
- display: "block",
- },
- left: {
- padding: "8px 0px 0px 0px",
- },
- titleText: {
- textAlign: "center",
- },
- actions: {
- textAlign: "center",
- },
- },
- "@media screen and (max-width: 480px)": {},
-});
-
-class MUIDataTableToolbar extends React.Component {
- state = {
- iconActive: null,
- showSearch: false,
- };
-
- handleCSVDownload = () => {
- const { data, columns, options } = this.props;
-
- const CSVHead =
- columns
- .reduce(
- (soFar, column) =>
- column.download ? soFar + '"' + column.name + '"' + options.downloadOptions.separator : soFar,
- "",
- )
- .slice(0, -1) + "\r\n";
-
- const CSVBody = data
- .reduce(
- (soFar, row) =>
- soFar +
- '"' +
- row.data
- .filter((field, index) => columns[index].download)
- .join('"' + options.downloadOptions.separator + '"') +
- '"\r\n',
- [],
- )
- .trim();
-
- /* taken from react-csv */
- const csv = `${CSVHead}${CSVBody}`;
- const blob = new Blob([csv], { type: "text/csv" });
-
- if (navigator && navigator.msSaveOrOpenBlob) {
- navigator.msSaveOrOpenBlob(blob, options.downloadOptions.filename);
- } else {
- const dataURI = `data:text/csv;charset=utf-8,${csv}`;
-
- const URL = window.URL || window.webkitURL;
- const downloadURI = typeof URL.createObjectURL === "undefined" ? dataURI : URL.createObjectURL(blob);
-
- let link = document.createElement("a");
- link.setAttribute("href", downloadURI);
- link.setAttribute("download", options.downloadOptions.filename);
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- }
- };
-
- setActiveIcon = iconName => {
- this.setState(() => ({
- iconActive: iconName,
- showSearch: iconName === "search" ? this.handleShowSearch() : false,
- }));
- };
-
- getActiveIcon = (styles, iconName) => {
- return this.state.iconActive !== iconName ? styles.icon : styles.iconActive;
- };
-
- handleShowSearch = () => {
- !!this.props.options.onSearchOpen && this.props.options.onSearchOpen();
- this.props.setTableAction("onSearchOpen");
- return true;
- };
-
- hideSearch = () => {
- const { onSearchClose } = this.props.options;
-
- if (onSearchClose) onSearchClose();
- this.props.searchTextUpdate(null);
-
- this.setState(() => ({
- iconActive: null,
- showSearch: false,
- }));
-
- this.searchButton.focus();
- };
-
- render() {
- const {
- data,
- options,
- classes,
- columns,
- filterData,
- filterList,
- filterUpdate,
- resetFilters,
- searchTextUpdate,
- toggleViewColumn,
- title,
- tableRef,
- } = this.props;
-
- const { search, downloadCsv, print, viewColumns, filterTable } = options.textLabels.toolbar;
- const { showSearch } = this.state;
-
- return (
-
-
- {showSearch === true ? (
-
- ) : (
-
-
- {title}
-
-
- )}
-
- {options.search && (
-
- (this.searchButton = el)}
- classes={{ root: this.getActiveIcon(classes, "search") }}
- onClick={this.setActiveIcon.bind(null, "search")}>
-
-
-
- )}
-
- {options.download && (
-
-
-
-
-
- )}
-
- {options.print && (
-
-
- (
-
-
-
- )}
- content={() => this.props.tableRef()}
- />
-
-
- )}
-
- {options.viewColumns && (
-
}
- classes={classes}>
-
-
- )}
-
- {options.filter && (
-
}
- classes={classes}>
-
-
- )}
- {options.customToolbar ? options.customToolbar() : false}
-
- );
- }
-}
-
-export default styled(MUIDataTableToolbar)(defaultToolbarStyles, { name: "MUIDataTableToolbar" });
diff --git a/src/MUIPopover/MUIDataTablePopoverWrapper.js b/src/MUIPopover/MUIDataTablePopoverWrapper.js
deleted file mode 100644
index b5ac50aa1..000000000
--- a/src/MUIPopover/MUIDataTablePopoverWrapper.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import Tooltip from "@material-ui/core/Tooltip";
-import IconButton from "@material-ui/core/IconButton";
-import MUIPopover from "./MUIPopover";
-import MUIPopoverTarget from "./MUIPopoverTarget";
-import MUIPopoverContent from "./MUIPopoverContent";
-
-class MUIDataTablePopoverWrapper extends React.PureComponent {
- constructor(props) {
- super(props);
- }
- render() {
- const { label, tableRef, onClick, icon, children } = this.props;
-
- return (
-
-
-
- {icon}
-
-
- {children}
-
- );
- }
-}
-
-export default MUIDataTablePopoverWrapper;
diff --git a/src/MUIPopover/MUIPopover.js b/src/MUIPopover/MUIPopover.js
deleted file mode 100644
index 9aeed724f..000000000
--- a/src/MUIPopover/MUIPopover.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import Popover from "@material-ui/core/Popover";
-import MUIPopoverContent from "./MUIPopoverContent";
-import MUIPopoverTarget from "./MUIPopoverTarget";
-import { findDOMNode } from "react-dom";
-
-class MUIPopover extends React.Component {
- static propTypes = {
- /** Show indicating arrow. default: true */
- arrow: PropTypes.bool,
- /** Reference callback to handleRequestClose() to trigger manual close of MUIPopover */
- refClose: PropTypes.func,
- /** Reference callback to onExited() to trigger manual close of MUIPopover */
- refExit: PropTypes.func,
- /** MUIPopoverTarget and MUIPopoverContent are required children */
- children: (props, propName, componentName) => {
- let childMatch = true;
- const expectedComponents = [MUIPopoverContent, MUIPopoverTarget];
-
- React.Children.map(props.children, (child, index) => {
- if (expectedComponents.indexOf(child.type) === -1) childMatch = false;
- });
-
- if (!childMatch) {
- return new Error(
- "`" +
- componentName +
- "` " +
- "should only have children of the following types: `MUIPopoverTarget`, `MUIPopoverContent`.",
- );
- }
- },
- };
-
- state = {
- open: false,
- };
-
- componentWillMount() {
- this.anchorEl = null;
- }
-
- componentDidMount() {
- /*
- * expose close method to the parent
- */
- if (this.props.refClose) {
- this.props.refClose(this.handleRequestClose);
- }
- }
-
- componentDidUpdate(prevProps, prevState) {
- /*
- * Update Popover position if a filter removes data from the table because
- * it affects the window height which would cause the Popover to in the wrong place
- */
- if (this.state.open === true) {
- this.anchorEl = findDOMNode(this.anchorEl);
- this.popoverActions.updatePosition();
- }
- }
-
- handleClick = () => {
- this.anchorEl = findDOMNode(this.anchorEl);
- this.setState({ open: true });
- };
-
- handleRequestClose = cb => {
- this.setState({ open: false }, cb && typeof cb === "function" ? cb() : () => {});
- };
-
- handleOnExit = () => {
- if (this.props.refExit) {
- this.props.refExit();
- }
- };
-
- render() {
- let popoverRender = [];
-
- const { className, placement, refClose, refExit, children, ...providedProps } = this.props;
-
- React.Children.map(children, (child, index) => {
- if (child.type === MUIPopoverContent || child.type ===
.type) {
- const transformOriginSpecs = {
- vertical: "top",
- horizontal: "center",
- };
-
- const anchorOriginSpecs = {
- vertical: "bottom",
- horizontal: "center",
- };
-
- const popoverContent = (
-
(this.popoverActions = actions)}
- key={index}
- elevation={2}
- open={this.state.open}
- onClose={this.handleRequestClose}
- onExited={this.handleOnExit}
- anchorEl={this.anchorEl}
- anchorOrigin={anchorOriginSpecs}
- transformOrigin={transformOriginSpecs}
- {...providedProps}>
- {child}
-
- );
-
- popoverRender.push(popoverContent);
- } else if (child.type === MUIPopoverTarget || child.type ===
.type) {
- const targetContent = React.cloneElement(child, {
- key: index,
- targetRef: el => (this.anchorEl = el),
- onClick: this.handleClick,
- });
-
- popoverRender.push(targetContent);
- }
- });
-
- return popoverRender;
- }
-}
-
-export default MUIPopover;
diff --git a/src/MUIPopover/MUIPopoverContent.js b/src/MUIPopover/MUIPopoverContent.js
deleted file mode 100644
index 00cd90dcd..000000000
--- a/src/MUIPopover/MUIPopoverContent.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-
-class MUIPopoverContent extends React.Component {
- render() {
- return this.props.children;
- }
-}
-
-export default MUIPopoverContent;
diff --git a/src/MUIPopover/MUIPopoverTarget.js b/src/MUIPopover/MUIPopoverTarget.js
deleted file mode 100644
index 5a5d187e2..000000000
--- a/src/MUIPopover/MUIPopoverTarget.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-
-class MUIPopoverTarget extends React.Component {
- render() {
- const targetContent = React.Children.map(this.props.children, (child, index) => {
- return React.cloneElement(child, {
- key: index,
- ref: this.props.targetRef,
- onClick: this.props.onClick,
- });
- });
-
- return targetContent;
- }
-}
-
-export default MUIPopoverTarget;
diff --git a/src/MUIPopover/index.js b/src/MUIPopover/index.js
deleted file mode 100644
index 71cff317a..000000000
--- a/src/MUIPopover/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import MUIPopover from "./MUIPopover";
-import MUIPopoverContent from "./MUIPopoverContent";
-import MUIPopoverTarget from "./MUIPopoverTarget";
-
-export { MUIPopover, MUIPopoverContent, MUIPopoverTarget };
diff --git a/src/components/Popover.js b/src/components/Popover.js
new file mode 100644
index 000000000..923ce4212
--- /dev/null
+++ b/src/components/Popover.js
@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MuiPopover from '@material-ui/core/Popover';
+import { findDOMNode } from 'react-dom';
+
+class Popover extends React.Component {
+ state = {
+ open: false,
+ };
+
+ componentWillMount() {
+ this.anchorEl = null;
+ }
+
+ componentDidMount() {
+ if (this.props.refClose) {
+ this.props.refClose(this.handleRequestClose);
+ }
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ /*
+ * Update Popover position if a filter removes data from the table because
+ * it affects the window height which would cause the Popover to in the wrong place
+ */
+ if (this.state.open === true) {
+ this.anchorEl = findDOMNode(this.anchorEl);
+ this.popoverActions.updatePosition();
+ }
+ }
+
+ handleClick = () => {
+ this.anchorEl = findDOMNode(this.anchorEl);
+ this.setState({ open: true });
+ };
+
+ handleRequestClose = cb => {
+ this.setState({ open: false }, cb && typeof cb === 'function' ? cb() : () => {});
+ };
+
+ handleOnExit = () => {
+ if (this.props.refExit) {
+ this.props.refExit();
+ }
+ };
+
+ render() {
+ const { className, placement, trigger, refExit, content, ...providedProps } = this.props;
+
+ const transformOriginSpecs = {
+ vertical: 'top',
+ horizontal: 'center',
+ };
+
+ const anchorOriginSpecs = {
+ vertical: 'bottom',
+ horizontal: 'center',
+ };
+
+ const triggerEl = React.cloneElement(trigger, {
+ key: 'content',
+ ref: el => (this.anchorEl = el),
+ onClick: () => {
+ if (trigger.props.onClick) trigger.props.onClick();
+ this.handleClick();
+ },
+ });
+
+ return (
+
+ (this.popoverActions = actions)}
+ elevation={2}
+ open={this.state.open}
+ onClose={this.handleRequestClose}
+ onExited={this.handleOnExit}
+ anchorEl={this.anchorEl}
+ ref={el => this.popoverEl}
+ anchorOrigin={anchorOriginSpecs}
+ transformOrigin={transformOriginSpecs}
+ {...providedProps}>
+ {content}
+
+ {triggerEl}
+
+ );
+ }
+}
+
+export default Popover;
diff --git a/src/components/TableBody.js b/src/components/TableBody.js
new file mode 100644
index 000000000..701d8e56d
--- /dev/null
+++ b/src/components/TableBody.js
@@ -0,0 +1,169 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Typography from '@material-ui/core/Typography';
+import MuiTableBody from '@material-ui/core/TableBody';
+import TableBodyCell from './TableBodyCell';
+import TableBodyRow from './TableBodyRow';
+import TableSelectCell from './TableSelectCell';
+import { withStyles } from '@material-ui/core/styles';
+
+const defaultBodyStyles = {
+ root: {},
+ emptyTitle: {
+ textAlign: 'center',
+ },
+};
+
+class TableBody extends React.Component {
+ static propTypes = {
+ /** Data used to describe table */
+ data: PropTypes.array.isRequired,
+ /** Total number of data rows */
+ count: PropTypes.number.isRequired,
+ /** Columns used to describe table */
+ columns: PropTypes.array.isRequired,
+ /** Options used to describe table */
+ options: PropTypes.object.isRequired,
+ /** Data used to filter table against */
+ filterList: PropTypes.array,
+ /** Callback to execute when row is clicked */
+ onRowClick: PropTypes.func,
+ /** Table rows selected */
+ selectedRows: PropTypes.object,
+ /** Callback to trigger table row select */
+ selectRowUpdate: PropTypes.func,
+ /** Data used to search table against */
+ searchText: PropTypes.string,
+ /** Toggle row expandable */
+ toggleExpandRow: PropTypes.func,
+ /** Extend the style applied to components */
+ classes: PropTypes.object,
+ };
+
+ static defaultProps = {
+ toggleExpandRow: () => {},
+ };
+
+ buildRows() {
+ const { data, page, rowsPerPage, count } = this.props;
+
+ if (this.props.options.serverSide) return data;
+
+ let rows = [];
+ const totalPages = Math.floor(count / rowsPerPage);
+ const fromIndex = page === 0 ? 0 : page * rowsPerPage;
+ const toIndex = Math.min(count, (page + 1) * rowsPerPage);
+
+ if (page > totalPages && totalPages !== 0) {
+ throw new Error(
+ 'Provided options.page of `' +
+ page +
+ '` is greater than the total available page length of `' +
+ totalPages +
+ '`',
+ );
+ }
+
+ for (let rowIndex = fromIndex; rowIndex < count && rowIndex < toIndex; rowIndex++) {
+ if (data[rowIndex] !== undefined) rows.push(data[rowIndex]);
+ }
+
+ return rows.length ? rows : null;
+ }
+
+ getRowIndex(index) {
+ const { page, rowsPerPage, options } = this.props;
+
+ if (options.serverSide) {
+ return index;
+ }
+
+ const startIndex = page === 0 ? 0 : page * rowsPerPage;
+ return startIndex + index;
+ }
+
+ isRowSelected(dataIndex) {
+ const { selectedRows } = this.props;
+ return selectedRows.lookup && selectedRows.lookup[dataIndex] ? true : false;
+ }
+
+ isRowExpanded(dataIndex) {
+ const { expandedRows } = this.props;
+ return expandedRows.lookup && expandedRows.lookup[dataIndex] ? true : false;
+ }
+
+ handleRowSelect = data => {
+ this.props.selectRowUpdate('cell', data);
+ };
+
+ render() {
+ const { classes, columns, toggleExpandRow, options } = this.props;
+ const tableRows = this.buildRows();
+
+ return (
+
+ {tableRows ? (
+ tableRows.map(({ data: row, dataIndex }, rowIndex) => (
+
+
+ {options.selectableRows && (
+
+ )}
+ {row.map(
+ (column, columnIndex) =>
+ columns[columnIndex].display === 'true' && (
+
+ {column}
+
+ ),
+ )}
+
+ {this.isRowExpanded(dataIndex) && options.renderExpandableRow(row, { rowIndex, dataIndex })}
+
+ ))
+ ) : (
+
+
+
+ {options.textLabels.body.noMatch}
+
+
+
+ )}
+
+ );
+ }
+}
+
+export default withStyles(defaultBodyStyles, { name: 'MUIDataTableBody' })(TableBody);
diff --git a/src/MUIDataTableBodyCell.js b/src/components/TableBodyCell.js
similarity index 58%
rename from src/MUIDataTableBodyCell.js
rename to src/components/TableBodyCell.js
index 31d709c20..6ee07a34b 100644
--- a/src/MUIDataTableBodyCell.js
+++ b/src/components/TableBodyCell.js
@@ -1,35 +1,35 @@
-import React from "react";
-import classNames from "classnames";
-import TableCell from "@material-ui/core/TableCell";
-import { withStyles } from "@material-ui/core/styles";
+import React from 'react';
+import classNames from 'classnames';
+import TableCell from '@material-ui/core/TableCell';
+import { withStyles } from '@material-ui/core/styles';
const defaultBodyCellStyles = theme => ({
root: {},
cellHide: {
- display: "none",
+ display: 'none',
},
cellStacked: {
- [theme.breakpoints.down("sm")]: {
- display: "inline-block",
- backgroundColor: "#FFF",
- fontSize: "16px",
- height: "24px",
- width: "calc(50% - 80px)",
- whiteSpace: "nowrap",
+ [theme.breakpoints.down('sm')]: {
+ display: 'inline-block',
+ backgroundColor: '#FFF',
+ fontSize: '16px',
+ height: '24px',
+ width: 'calc(50% - 80px)',
+ whiteSpace: 'nowrap',
},
},
responsiveStacked: {
- [theme.breakpoints.down("sm")]: {
- display: "inline-block",
- fontSize: "16px",
- width: "calc(50% - 80px)",
- whiteSpace: "nowrap",
- height: "24px",
+ [theme.breakpoints.down('sm')]: {
+ display: 'inline-block',
+ fontSize: '16px',
+ width: 'calc(50% - 80px)',
+ whiteSpace: 'nowrap',
+ height: '24px',
},
},
});
-class MUIDataTableBodyCell extends React.Component {
+class TableBodyCell extends React.Component {
handleClick = () => {
const { colIndex, options, children, dataIndex, rowIndex } = this.props;
if (options.onCellClick) {
@@ -57,7 +57,7 @@ class MUIDataTableBodyCell extends React.Component {
{
[classes.root]: true,
[classes.cellHide]: true,
- [classes.cellStacked]: options.responsive === "stacked",
+ [classes.cellStacked]: options.responsive === 'stacked',
},
className,
)}>
@@ -69,7 +69,7 @@ class MUIDataTableBodyCell extends React.Component {
className={classNames(
{
[classes.root]: true,
- [classes.responsiveStacked]: options.responsive === "stacked",
+ [classes.responsiveStacked]: options.responsive === 'stacked',
},
className,
)}
@@ -80,4 +80,4 @@ class MUIDataTableBodyCell extends React.Component {
}
}
-export default withStyles(defaultBodyCellStyles, { name: "MUIDataTableBodyCell" })(MUIDataTableBodyCell);
+export default withStyles(defaultBodyCellStyles, { name: 'MUIDataTableBodyCell' })(TableBodyCell);
diff --git a/src/MUIDataTableBodyRow.js b/src/components/TableBodyRow.js
similarity index 67%
rename from src/MUIDataTableBodyRow.js
rename to src/components/TableBodyRow.js
index d9d88784e..fe3307d2f 100644
--- a/src/MUIDataTableBodyRow.js
+++ b/src/components/TableBodyRow.js
@@ -1,19 +1,19 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-import TableRow from "@material-ui/core/TableRow";
-import { withStyles } from "@material-ui/core/styles";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import TableRow from '@material-ui/core/TableRow';
+import { withStyles } from '@material-ui/core/styles';
const defaultBodyRowStyles = theme => ({
root: {},
responsiveStacked: {
- [theme.breakpoints.down("sm")]: {
- border: "solid 2px rgba(0, 0, 0, 0.15)",
+ [theme.breakpoints.down('sm')]: {
+ border: 'solid 2px rgba(0, 0, 0, 0.15)',
},
},
});
-class MUIDataTableBodyRow extends React.Component {
+class TableBodyRow extends React.Component {
static propTypes = {
/** Options used to describe table */
options: PropTypes.object.isRequired,
@@ -35,7 +35,7 @@ class MUIDataTableBodyRow extends React.Component {
className={classNames(
{
[classes.root]: true,
- [classes.responsiveStacked]: options.responsive === "stacked",
+ [classes.responsiveStacked]: options.responsive === 'stacked',
},
className,
)}
@@ -47,4 +47,4 @@ class MUIDataTableBodyRow extends React.Component {
}
}
-export default withStyles(defaultBodyRowStyles, { name: "MUIDataTableBodyRow" })(MUIDataTableBodyRow);
+export default withStyles(defaultBodyRowStyles, { name: 'MUIDataTableBodyRow' })(TableBodyRow);
diff --git a/src/MUIDataTableFilter.js b/src/components/TableFilter.js
similarity index 70%
rename from src/MUIDataTableFilter.js
rename to src/components/TableFilter.js
index 75c6980ec..3bf87c66a 100644
--- a/src/MUIDataTableFilter.js
+++ b/src/components/TableFilter.js
@@ -1,112 +1,112 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-import Typography from "@material-ui/core/Typography";
-import FormControl from "@material-ui/core/FormControl";
-import FormGroup from "@material-ui/core/FormGroup";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import InputLabel from "@material-ui/core/InputLabel";
-import Input from "@material-ui/core/Input";
-import MenuItem from "@material-ui/core/MenuItem";
-import Select from "@material-ui/core/Select";
-import Checkbox from "@material-ui/core/Checkbox";
-import ListItemText from "@material-ui/core/ListItemText";
-import { withStyles } from "@material-ui/core/styles";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Typography from '@material-ui/core/Typography';
+import FormControl from '@material-ui/core/FormControl';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import InputLabel from '@material-ui/core/InputLabel';
+import Input from '@material-ui/core/Input';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+import Checkbox from '@material-ui/core/Checkbox';
+import ListItemText from '@material-ui/core/ListItemText';
+import { withStyles } from '@material-ui/core/styles';
export const defaultFilterStyles = {
root: {
- padding: "16px 24px 16px 24px",
- fontFamily: "Roboto",
+ padding: '16px 24px 16px 24px',
+ fontFamily: 'Roboto',
},
header: {
- flex: "0 0 auto",
- marginBottom: "16px",
- width: "100%",
- display: "flex",
- justifyContent: "space-between",
+ flex: '0 0 auto',
+ marginBottom: '16px',
+ width: '100%',
+ display: 'flex',
+ justifyContent: 'space-between',
},
title: {
- display: "inline-block",
- marginLeft: "7px",
- color: "#424242",
- fontSize: "14px",
+ display: 'inline-block',
+ marginLeft: '7px',
+ color: '#424242',
+ fontSize: '14px',
fontWeight: 500,
},
noMargin: {
- marginLeft: "0px",
+ marginLeft: '0px',
},
reset: {
- alignSelf: "left",
+ alignSelf: 'left',
},
resetLink: {
- color: "#027cb5",
- backgroundColor: "#FFF",
- display: "inline-block",
- marginLeft: "24px",
- fontSize: "12px",
- cursor: "pointer",
- border: "none",
- "&:hover": {
- color: "#FF0000",
+ color: '#027cb5',
+ backgroundColor: '#FFF',
+ display: 'inline-block',
+ marginLeft: '24px',
+ fontSize: '12px',
+ cursor: 'pointer',
+ border: 'none',
+ '&:hover': {
+ color: '#FF0000',
},
},
filtersSelected: {
- alignSelf: "right",
+ alignSelf: 'right',
},
/* checkbox */
checkboxList: {
- flex: "1 1 100%",
- display: "inline-flex",
- marginRight: "24px",
+ flex: '1 1 100%',
+ display: 'inline-flex',
+ marginRight: '24px',
},
checkboxListTitle: {
- marginLeft: "7px",
- marginBottom: "8px",
- fontSize: "14px",
- color: "#424242",
- textAlign: "left",
+ marginLeft: '7px',
+ marginBottom: '8px',
+ fontSize: '14px',
+ color: '#424242',
+ textAlign: 'left',
fontWeight: 500,
},
checkboxFormGroup: {
- marginTop: "8px",
+ marginTop: '8px',
},
checkboxFormControl: {
- margin: "0px",
+ margin: '0px',
},
checkboxFormControlLabel: {
- fontSize: "15px",
- marginLeft: "8px",
- color: "#4a4a4a",
+ fontSize: '15px',
+ marginLeft: '8px',
+ color: '#4a4a4a',
},
checkboxIcon: {
//color: "#027cb5",
- width: "32px",
- height: "32px",
+ width: '32px',
+ height: '32px',
},
checkbox: {
- "&$checked": {
- color: "#027cB5",
+ '&$checked': {
+ color: '#027cB5',
},
},
checked: {},
/* selects */
selectRoot: {
- display: "flex",
- marginTop: "16px",
- flexDirection: "row",
- flexWrap: "wrap",
- width: "100%",
- height: "80%",
- justifyContent: "space-between",
+ display: 'flex',
+ marginTop: '16px',
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ width: '100%',
+ height: '80%',
+ justifyContent: 'space-between',
},
selectFormControl: {
- flex: "1 1 calc(50% - 24px)",
- marginRight: "24px",
- marginBottom: "24px",
+ flex: '1 1 calc(50% - 24px)',
+ marginRight: '24px',
+ marginBottom: '24px',
},
};
-class MUIDataTableFilter extends React.Component {
+class TableFilter extends React.Component {
static propTypes = {
/** Data used to populate filter dropdown/checkbox */
filterData: PropTypes.array.isRequired,
@@ -123,16 +123,16 @@ class MUIDataTableFilter extends React.Component {
};
handleCheckboxChange = (index, column) => {
- this.props.onFilterUpdate(index, column, "checkbox");
+ this.props.onFilterUpdate(index, column, 'checkbox');
};
handleDropdownChange = (event, index) => {
- const value = event.target.value === "All" ? "" : event.target.value;
- this.props.onFilterUpdate(index, value, "dropdown");
+ const value = event.target.value === 'All' ? '' : event.target.value;
+ this.props.onFilterUpdate(index, value, 'dropdown');
};
handleMultiselectChange = (index, column) => {
- this.props.onFilterUpdate(index, column, "multiselect");
+ this.props.onFilterUpdate(index, column, 'multiselect');
};
renderCheckbox(columns) {
@@ -161,7 +161,7 @@ class MUIDataTableFilter extends React.Component {
root: classes.checkbox,
checked: classes.checked,
}}
- value={filterColumn !== null ? filterColumn.toString() : ""}
+ value={filterColumn !== null ? filterColumn.toString() : ''}
/>
}
label={filterColumn}
@@ -195,7 +195,7 @@ class MUIDataTableFilter extends React.Component {
{filterData[index].map((filterColumn, filterIndex) => (
))}
@@ -220,7 +220,7 @@ class MUIDataTableFilter extends React.Component {