Skip to content

Commit

Permalink
keypress document listen event for ESCAPE on toolbar search
Browse files Browse the repository at this point in the history
increase code coverage
  • Loading branch information
gregnb committed Dec 27, 2017
1 parent cb7689b commit bc6fc8d
Show file tree
Hide file tree
Showing 9 changed files with 346 additions and 133 deletions.
56 changes: 33 additions & 23 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@
[![dependencies Status](https://david-dm.org/gregnb/mui-datatables/status.svg)](https://david-dm.org/gregnb/mui-datatables)
[![npm version](https://badge.fury.io/js/mui-datatables.svg)](https://badge.fury.io/js/mui-datatables)

MUI-Datatables is a data tables component built on [Material-UI V1](https://www.material-ui-next.com). It comes with features like filtering, view/hide columns, search, export to CSV download, printing, pagination, and sorting. On top of the ability to customize styling on most views, there is a responsive data stacking mode for mobile/tablet devices.
MUI-Datatables is a data tables component built on [Material-UI V1](https://www.material-ui-next.com). It comes with features like filtering, view/hide columns, search, export to CSV download, printing, pagination, and sorting. On top of the ability to customize styling on most views, there are two responsive modes "stacked" and "scroll" for mobile/tablet devices.

<div align="center">
<img src="https://user-images.githubusercontent.com/19170080/34346996-b59a8b3a-e9cb-11e7-80d5-591aef3dc1f4.gif" />
</div>

## Install

`npm install mui-datatables --save-dev `
`npm install mui-datatables --save`

## Demo

Expand All @@ -40,11 +40,15 @@ const data = [
];

const options = {
filter: true,
filterType: 'checkbox',
};

<MUIDataTable data={data} columns={columns} options={options} />
<MUIDataTable
title={"Employee List"}
data={data}
columns={columns}
options={options}
/>

```

Expand All @@ -57,25 +61,26 @@ The component accepts the following props:

|Name|Type|Description
|:--:|:-----|:-----|
|**`title`**|array|Title used to caption table
|**`columns`**|array|Columns used to describe table. Must be an array of simple strings
|**`data`**|array|Data used to describe table. Must be an array of simple strings
|**`options`**|object|Options used to describe table

#### Options:
|Name|Type|Description
|:--:|:-----|:-----|
|**`styles`**|object|Extend or override default styling
|**`filterType `**|string|Choice of filtering view. Options are "checkbox" or "dropdown" (default: checkbox)
|**`pagination`**|boolean|Enable/disable pagination
|**`responsive`**|boolean|Enable/disable responsive data stacking
|**`rowsPerPage`**|number|Number of rows allowed per page
|**`rowsPerPageOptions`**|array|Options to provide in pagination for number of rows a user can select
|**`rowHover`**|boolean|Enable/disable hover style over rows
|**`sort`**|boolean|Show/hide sort icon from toolbar
|**`filter`**|boolean|Show/hide filter icon from toolbar
|**`search`**|boolean|Show/hide search icon from toolbar
|**`print`**|boolean|Show/hide print icon from toolbar
|**`download`**|boolean|Show/hide download icon from toolbar
|Name|Type|Default|Description
|:--:|:-----|:--|:-----|
|**`styles`**|object||Extend or override default styling
|**`filterType `**|string|'dropdown'|Choice of filtering view. Options are "checkbox" or "dropdown"
|**`pagination`**|boolean|true|Enable/disable pagination
|**`responsive`**|string|'stacked'|Enable/disable responsive table views. Options: 'stacked', 'scroll'
|**`rowsPerPage`**|number|10|Number of rows allowed per page
|**`rowsPerPageOptions`**|array|[10,15,20]|Options to provide in pagination for number of rows a user can select
|**`rowHover`**|boolean|true|Enable/disable hover style over rows
|**`sort`**|boolean|true|Show/hide sort icon from toolbar
|**`filter`**|boolean|true|Show/hide filter icon from toolbar
|**`search`**|boolean|true|Show/hide search icon from toolbar
|**`print`**|boolean|true|Show/hide print icon from toolbar
|**`download`**|boolean|true|Show/hide download icon from toolbar


## Customize Styling
Expand Down Expand Up @@ -109,12 +114,17 @@ const options = {
}
};

<MUIDataTable data={data} columns={columns} options={options} />
<MUIDataTable
title={"some title"}
data={data}
columns={columns}
options={options}
/>

```

#### Styling Table
--
---
<a name="styletable"></a>


Expand Down Expand Up @@ -148,7 +158,7 @@ const options = {
```

#### Styling Toolbar
--
---
<a name="styletoolbar"></a>

```js
Expand Down Expand Up @@ -184,7 +194,7 @@ const options = {
```

#### Styling FilterList
--
---
<a name="stylefilterlist"></a>


Expand All @@ -205,7 +215,7 @@ const options = {
```

#### Styling Pagination
--
---
<a name="stylepagination"></a>

```js
Expand Down
6 changes: 6 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
"rollup-plugin-env": "^0.21.4",
"rollup-plugin-node-resolve": "^3.0.0",
"rollup-plugin-uglify": "^2.0.1",
"simulant": "^0.2.2",
"sinon": "^4.1.3",
"webpack": "^3.9.1",
"webpack-dev-server": "^2.9.5"
Expand Down
17 changes: 10 additions & 7 deletions src/MUIDataTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,18 @@ class MUIDataTable extends React.Component {
columns: PropTypes.array.isRequired,
/** Options used to describe table */
options: PropTypes.shape({
sort: PropTypes.bool,
filter: PropTypes.bool,
responsive: PropTypes.oneOf(["stacked", "scroll"]),
filterType: PropTypes.oneOf(["dropdown", "checkbox"]),
pagination: PropTypes.bool,
rowHover: PropTypes.bool,
rowsPerPage: PropTypes.number,
rowsPerPageOptions: PropTypes.array,
filter: PropTypes.bool,
sort: PropTypes.bool,
search: PropTypes.bool,
print: PropTypes.bool,
responsive: PropTypes.oneOf(["stacked", "scroll"]),
viewColumns: PropTypes.bool,
download: PropTypes.bool,
}),
/** Pass and use className to style MUIDataTable as desired */
className: PropTypes.string,
Expand Down Expand Up @@ -79,17 +81,18 @@ class MUIDataTable extends React.Component {

getDefaultOptions(props) {
const defaultOptions = {
rowHover: true,
sort: true,
filter: true,
responsive: "stacked",
filterType: "checkbox",
pagination: true,
rowHover: true,
rowsPerPage: 10,
rowsPerPageOptions: [10, 15, 100],
filter: true,
sort: true,
search: true,
print: true,
responsive: "stacked",
viewColumns: true,
download: true,
};

this.options = { ...defaultOptions, ...props.options };
Expand Down
28 changes: 14 additions & 14 deletions src/MUIDataTableSearch.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,25 +29,25 @@ const defaultSearchStyles = {
},
};

/*
issues to work out:
- pass hooks from tabletoolbar to close this
- return focus back to the search icon
- WCAG issues. catch ESCAPE key to close
use the rootRef
const doc = ownerDocument(ReactDOM.findDOMNode(this));
this.props.modalManager.add(this);
this.onDocumentKeyUpListener = addEventListener(doc, 'keyup', this.handleDocumentKeyUp);
*/

class MUIDataTableSearch extends React.Component {
handleTextChange = event => {
this.props.onSearch(event.target.value);
};

componentDidMount() {
document.addEventListener("keydown", this.onKeyDown, false);
}

componentWillUnmount() {
document.removeEventListener("keydown", this.onKeyDown, false);
}

onKeyDown = event => {
if (event.keyCode == 27) {
this.props.onHide();
}
};

render() {
const { classes, onHide, onSearch, options } = this.props;

Expand Down
Loading

0 comments on commit bc6fc8d

Please sign in to comment.