Skip to content

Commit 2ea8bea

Browse files
committed
initial commit
0 parents  commit 2ea8bea

File tree

12 files changed

+10493
-0
lines changed

12 files changed

+10493
-0
lines changed

.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["env", "react"]
3+
}

.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# .gitignore
2+
3+
node_modules
4+
dist
5+
src
6+
.idea
7+
index.js

.npmignore

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# .npmignore
2+
3+
dist
4+
src
5+
examples
6+
.babelrc
7+
.gitignore
8+
webpack.config.js
9+
.idea

LICENSE

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
3+
Copyright (c) 2018 Gihan Rangana
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6+
7+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8+
9+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
# Material UI DataTables for react MaterialUI ^v1 - react-mui-datatables
2+
3+
[![npm version](https://badge.fury.io/js/mui-datatables.svg)](https://badge.fury.io/js/mui-datatables)
4+
5+
react-mui-datatables is table component for [Material-UI V1](https://www.material-ui.com). This vetsion comes with search,export csv,sort,paginations. more options coming soon.stay with us...
6+
7+
8+
## Install
9+
10+
`npm install react-mui-datatables --save`
11+
12+
## Demo
13+
14+
[![Edit 0qx6yljwlv](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/0qx6yljwlv)
15+
16+
## Usage
17+
18+
For a simple table:
19+
20+
```js
21+
22+
import MuiDataTable from "../../lib";
23+
import data from "./data";
24+
25+
26+
class App extends Component {
27+
constructor(props) {
28+
super(props);
29+
30+
App.handleClick = App.handleClick.bind(this);
31+
}
32+
33+
componentWillMount() {
34+
35+
}
36+
37+
/*
38+
* This function for handle your action button click event
39+
* if you add action button you can get your own key from array using below command
40+
* please add indexColumn key to options object.
41+
*/
42+
static handleClick(e) {
43+
/* Your code is here.alert is the example */
44+
alert("parent td#id: " + e.target.parentNode.id);
45+
}
46+
47+
render() {
48+
const columns = [
49+
{
50+
label: "First Name",
51+
key: "fname", /* this value is the your array object key.if you did't add this table is not working */
52+
sort: true /* you can set column sort true / false as your own */
53+
},
54+
{ label: "Last Name", key: "lname", sort: true },
55+
{ label: "Email", key: "email" },
56+
{ label: "Gender", key: "gender" },
57+
{ label: "Action", key: "action" }, /* <-- this is required if you using customAction */
58+
]; /* <-- Table header columns. this is required */
59+
60+
const action = <Button onClick={App.handleClick}>Action</Button>; /* <-- action button */
61+
62+
const options = {
63+
hasIndex: true, /* <-- use numbers for rows*/
64+
customAction: action, /* <-- use action button for row */
65+
searchBox: true, /* <-- search true or false */
66+
csv: true, /* <-- csv download true or false */
67+
indexColumn: "fname" /* <-- add your data first unique column name for this like _id, i used fname because i don't have a _id field in my array */
68+
};
69+
70+
return (
71+
<div>
72+
<MuiDataTable data={data} columns={columns} options={options} title={"User Data"} />
73+
</div>
74+
);
75+
}
76+
77+
}
78+
```
79+
80+
## API
81+
82+
83+
#### &lt;MuiDataTable />
84+
85+
This component accepts the following props:
86+
87+
|Name|Type|Description
88+
|:--:|:-----|:-----|
89+
|**`title`**|array|Title used to caption table
90+
|**`columns`**|array|Columns use to describe the table.this display on the table head cells.This is required
91+
|**`data`**|array|Data is your data array.This is required
92+
|**`options`**|object|Options use to customize your table
93+
94+
Options:
95+
Use these as option object key.
96+
97+
|Name|Type|Default|Description
98+
|:--:|:-----|:--|:-----|
99+
|**`hasIndex`**|bool|false|This is use for create column with your index for adding numbers for rows first column
100+
|**`customAction`**|string||You can add custom action button if you want.please add this as a component
101+
|**`searchBox`**|bool|true|You can remove search box using this option
102+
|**`csv`**|bool|true|You can remove csv download using this option
103+
|**`indexColumn`**|string||If add custom action button please set the indexColumn as your own array key.
104+
105+
## Custom Styles
106+
You can styles using material ui CreateMuiTheme function.
107+
108+
109+
## License
110+
The files included in this repository are licensed under the MIT license.

0 commit comments

Comments
 (0)