customized-material-table

Roadmap

• More on our roadmap can be found here

Key features

• Actions
• Component overriding
• Custom column rendering
• Detail Panel
• Editable
• Export
• Filtering
• Grouping
• Localization
• Remote Data
• Search
• Selection
• Sorting
• Styling
• Tree Data
• and more

Demo and documentation

You can access all code examples and documentation on our site material-table.com.

Support material-table

To support material-table visit SUPPORT page.

Issue Prioritizing

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

Prerequisites

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.

Installation

1.Install package

To install material-table with npm: npm i customized-material-table

npm install customized-material-table @material-ui/core --save

To install customized-material-table with yarn:

yarn add customized-material-table @material-ui/core

2.Add material icons

There are two ways to use icons in customized-material-table either import the material icons font via html OR import material icons and use the customized-material-table icons prop.

HTML

OR

Import Material icons

Icons can be imported to be used in customized-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) => ),
    Check: forwardRef((props, ref) => ),
    Clear: forwardRef((props, ref) => ),
    Delete: forwardRef((props, ref) => ),
    DetailPanel: forwardRef((props, ref) => ),
    Edit: forwardRef((props, ref) => ),
    Export: forwardRef((props, ref) => ),
    Filter: forwardRef((props, ref) => ),
    FirstPage: forwardRef((props, ref) => ),
    LastPage: forwardRef((props, ref) => ),
    NextPage: forwardRef((props, ref) => ),
    PreviousPage: forwardRef((props, ref) => ),
    ResetSearch: forwardRef((props, ref) => ),
    Search: forwardRef((props, ref) => ),
    SortArrow: forwardRef((props, ref) => ),
    ThirdStateCheck: forwardRef((props, ref) => ),
    ViewColumn: forwardRef((props, ref) => )
  };

Usage

Here is a basic example of using customized-material-table within a react application.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import MaterialTable from "customized-material-table";

class App extends Component {
  render() {
    return (
      <div style="{{">
        {console.log("hellow")}}]
            }}
          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"
        /&gt;
      </div>
    );
  }
}

ReactDOM.render(, document.getElementById("react-div"));
## License

This project is licensed under the terms of the [MIT license](/LICENSE).