Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
material-table
Advanced tools
Readme
:warning: Please do not create pull requests that contains a lot of change. Because we are working on refactoring and testing. Just pull requests that fixes a bug with a few line changes.
A simple and powerful Datatable for React based on Material-UI Table with some additional features.
You can access all code examples and documentation on our site material-table.com.
To support material-table visit SUPPORT page.
Issues would be prioritized according reactions count. is:issue is:open sort:reactions-+1-desc
filter would be use.
List issues according to reaction score
The minimum React
version material-table supports is ^16.8.5
since material-table v1.36.1
. This is due to utilising react-beautiful-dnd
for drag & drop functionality which uses hooks.
If you use an older version of react we suggest to upgrade your dependencies or use material-table 1.36.0
.
To install material-table with npm
:
npm install material-table @material-ui/core --save
To install material-table with yarn
:
yarn add material-table @material-ui/core
There are two ways to use icons in material-table either import the material icons font via html OR import material icons and use the material-table icons
prop.
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
OR
Icons can be imported to be used in material-table offering more flexibility for customising the look and feel of material table over using a font library.
To install @material-ui/icons with npm
:
npm install @material-ui/icons --save
To install @material-ui/icons with yarn
:
yarn add @material-ui/icons
If your environment doesn't support tree-shaking, the recommended way to import the icons is the following:
import AddBox from "@material-ui/icons/AddBox";
import ArrowDownward from "@material-ui/icons/ArrowDownward";
If your environment support tree-shaking you can also import the icons this way:
import { AddBox, ArrowDownward } from "@material-ui/icons";
Note: Importing named exports in this way will result in the code for every icon being included in your project, so is not recommended unless you configure tree-shaking. It may also impact Hot Module Reload performance. Source: @material-ui/icons
Example
import { forwardRef } from 'react';
import AddBox from '@material-ui/icons/AddBox';
import ArrowDownward from '@material-ui/icons/ArrowDownward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';
const tableIcons = {
Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
};
<MaterialTable
icons={tableIcons}
...
/>
Here is a basic example of using material-table within a react application.
import React, { Component } from "react";
import ReactDOM from "react-dom";
import MaterialTable from "material-table";
class App extends Component {
render() {
return (
<div style={{ maxWidth: "100%" }}>
<MaterialTable
columns={[
{ title: "Adı", field: "name" },
{ title: "Soyadı", field: "surname" },
{ title: "Doğum Yılı", field: "birthYear", type: "numeric" },
{
title: "Doğum Yeri",
field: "birthCity",
lookup: { 34: "İstanbul", 63: "Şanlıurfa" },
},
]}
data={[
{
name: "Mehmet",
surname: "Baran",
birthYear: 1987,
birthCity: 63,
},
]}
title="Demo Title"
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("react-div"));
We'd love to have your helping hand on material-table
! See CONTRIBUTING.md for more information on what we're looking for and how to get started.
If you have any sort of doubt, idea or just want to talk about the project, feel free to join our chat on Gitter :)
This project exists thanks to all the people who contribute. [Contribute].
Become a financial contributor and help us sustain our community. [Contribute]
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
This project is licensed under the terms of the MIT license.
FAQs
Datatable for React based on https://material-ui.com/api/table/ with additional features
The npm package material-table receives a total of 49,989 weekly downloads. As such, material-table popularity was classified as popular.
We found that material-table demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.