hyojin / Material Ui Datatables
Licence: mit
An another React Data tables component.
Stars: ✭ 163
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Material Ui Datatables
Notistack
Highly customizable notification snackbars (toasts) that can be stacked on top of each other
Stars: ✭ 2,562 (+1471.78%)
Mutual labels: material-design, material-ui
Bootstrap Table
An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
Stars: ✭ 11,068 (+6690.18%)
Mutual labels: material-design, datatables
Material Ui Time Picker
A time picker for Material-UI.
Stars: ✭ 126 (-22.7%)
Mutual labels: material-design, material-ui
Material Design Data
关于 Material Design 的一切资料都在这里
Stars: ✭ 1,857 (+1039.26%)
Mutual labels: material-design, material-ui
Nextjs Material Kit
NextJS version of Material Kit React by Creative Tim
Stars: ✭ 141 (-13.5%)
Mutual labels: material-design, material-ui
Fancyshowcaseview
An easy-to-use customisable show case view with circular reveal animation.
Stars: ✭ 1,662 (+919.63%)
Mutual labels: material-design, material-ui
Devextreme Reactive
Business React components for Bootstrap and Material-UI
Stars: ✭ 1,800 (+1004.29%)
Mutual labels: material-design, material-ui
Materialabout
It's a material-design about screen to use on your Android apps. A developer profile and application information easy to integrate. 🔖
Stars: ✭ 1,511 (+826.99%)
Mutual labels: material-design, material-ui
Material Dashboard React
React version of Material Dashboard by Creative Tim
Stars: ✭ 1,947 (+1094.48%)
Mutual labels: material-design, material-ui
Ibackdrop
A library to simply use Backdrop in your project (make it easy). Read more ->
Stars: ✭ 137 (-15.95%)
Mutual labels: material-design, material-ui
Svelte Material Ui
Svelte Material UI Components
Stars: ✭ 2,081 (+1176.69%)
Mutual labels: material-design, material-ui
Materialdrawer
The flexible, easy to use, all in one drawer library for your Android project. Now brand new with material 2 design.
Stars: ✭ 11,498 (+6953.99%)
Mutual labels: material-design, material-ui
Hyperspace
The new beautiful, fluffy client for Mastodon in React + TypeScript
Stars: ✭ 124 (-23.93%)
Mutual labels: material-design, material-ui
Camerabutton
Instagram-like button for taking photos or recording videos
Stars: ✭ 121 (-25.77%)
Mutual labels: material-design, material-ui
Todayx
🌈Flutter App:🎊「今日份的X」(每天推荐一个:图片、诗歌、名言、音乐、乐评、高等数学、两种配色、化学方程式、Github Repo、知乎问题、文章)
Stars: ✭ 128 (-21.47%)
Mutual labels: material-design, material-ui
Smart Webcomponents
Web Components & Custom Elements for Professional Web Applications
Stars: ✭ 110 (-32.52%)
Mutual labels: material-design, material-ui
Android Issue Reporter
A powerful and simple library to open issues on GitHub directly from your app.
Stars: ✭ 115 (-29.45%)
Mutual labels: material-design, material-ui
Blazormaterial
Blazor components implementing Google's Material components for web - https://material.io/components/web
Stars: ✭ 136 (-16.56%)
Mutual labels: material-design, material-ui
Material Theme
Material Theme, the most epic theme for Sublime Text 3 by Mattia Astorino
Stars: ✭ 11,093 (+6705.52%)
Mutual labels: material-design, material-ui
Material-UI-Datatables
An another React Data tables component.
Material-UI-Datatables is a custom React component using awesome Material-UI. It provides rendering data and emitting events
such as filter and column sort and pagination which may help you dealing with your data. But it doesn't provide features all done within the component. Most parts of this component are stateless, which means you need to implement your logic for the events.
Now material-ui provides example code of data tables component with it's v1.0.0 package
Installation
npm install material-ui-datatables
or
yarn add material-ui-datatables
Demo
Status
Work in progress
Usage
import React, {Component} from 'react';
import DataTables from 'material-ui-datatables';
const TABLE_COLUMNS = [
{
key: 'name',
label: 'Dessert (100g serving)',
}, {
key: 'calories',
label: 'Calories',
},
...
];
const TABLE_DATA = [
{
name: 'Frozen yogurt',
calories: '159',
fat: '6.0',
carbs: '24',
...
}, {
name: 'Ice cream sandwich',
calories: '159',
fat: '6.0',
carbs: '24',
...
},
...
];
class MyComponent extends Component {
...
handleFilterValueChange = (value) => {
// your filter logic
}
handleSortOrderChange = (key, order) => {
// your sort logic
}
render() {
return (
<DataTables
height={'auto'}
selectable={false}
showRowHover={true}
columns={TABLE_COLUMNS}
data={TABLE_DATA}
showCheckboxes={false}
onCellClick={this.handleCellClick}
onCellDoubleClick={this.handleCellDoubleClick}
onFilterValueChange={this.handleFilterValueChange}
onSortOrderChange={this.handleSortOrderChange}
page={1}
count={100}
/>
);
}
}
Properties
Name | Type | Default | Description |
---|---|---|---|
columns | array | Array of column settings object | |
count | number | 0 | |
data | array | ||
enableSelectAll | bool | false | |
filterHintText | string | 'Search' | |
filterValue | string | '' | |
footerToolbarStyle | object | ||
headerToolbarMode | string | 'default' | 'default' or 'filter' |
height | string | 'inherit' | |
initialSort | object | {column: 'column key', order: 'asc or desc'} | |
multiSelectable | bool | false | |
onCellClick | function | ||
onCellDoubleClick | function | ||
onFilterValueChange | function | Should set 'showHeaderToolbar' to true first | |
onNextPageClick | function | ||
onPreviousPageClick | function | ||
onRowSelection | function | ||
onRowSizeChange | function | ||
onSortOrderChange | function | ||
page | number | 1 | |
rowSize | number | 10 | |
rowSizeLabel | string | 'Rows per page:' | |
rowSizeList | array | [10, 30, 50, 100] | |
selectable | bool | false | |
selectedRows | array | [] | |
showCheckboxes | bool | false | |
showFooterToolbar | bool | true | |
showHeaderToolbar | bool | false | |
showHeaderToolbarFilterIcon | bool | true | |
showRowHover | bool | false | |
showRowSizeControls | bool | false | |
summaryLabelTemplate | function | ||
tableBodyStyle | object | ||
tableHeaderColumnStyle | object | ||
tableHeaderStyle | object | ||
tableRowColumnStyle | object | ||
tableRowStyle | object | ||
tableStyle | object | ||
tableWrapperStyle | object | ||
title | string | Should set 'showHeaderToolbar' to true first | |
titleStyle | object | Should set 'showHeaderToolbar' to true first | |
toolbarIconRight | node | Can be an array of IconButton nodes |
Column settings
Name | Type | Default | Description |
---|---|---|---|
key | string | ||
label | string | ||
sortable | bool | false | |
tooltip | string | ||
className | string | ||
render | function | ||
alignRight | bool | ||
style | object | Inline column styles |
Setting example
{
key: 'name',
label: 'Dessert (100g serving)',
sortable: true,
tooltip: 'Dessert (100g serving)',
className: 'important-column',
style: {
width: 250,
},
render: (name, all) => <p>{name}</p>
}
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].