A simple and powerful Datatable for React based on Material-UI Table with some additional features.


⚠️ 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.

Build Status Financial Contributors on Open Collective npm package NPM Downloads Average time to resolve an issue xscode Follow on Twitter Gitter chat


Key features

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


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.


1.Install package

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

2.Add material icons

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.



Import Material icons

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


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} />)



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

); } } ReactDOM.render(, document.getElementById("react-div")); ">
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%" }}>
            { 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" },
              name: "Mehmet",
              surname: "Baran",
              birthYear: 1987,
              birthCity: 63,
          title="Demo Title"

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 :)


Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

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.

  • Support draggable rows

    Support draggable rows

    Is your feature request related to a problem? Please describe. It would be nice if material-table would support reordering rows by dragging them

    Describe the solution you'd like A new option to mark a table as row draggable and a callback to be notified when a row is dragged.

    Describe alternatives you've considered Is this possible to achieve by overriding components and using react-beautiful-dnd ? If so, this would be fine but I think a built-in option would be cleaner.

    help wanted wontfix feature 
    opened by rnielsen 54
  • Changing style (column width, cell width, etc.)

    Changing style (column width, cell width, etc.)

    • [x] Is there another way to change the column/cell styles? I tried what was suggested in issue (#261) as in:
    { title: 'Name', field: 'name',
         cellStyle: {
           width: 20,
           maxWidth: 20
         headerStyle: {
           maxWidth: 20

    but there are no changes to the width of the columns. I also tried changing the width and maxWidth:1 to see if there were any changes and there weren't: screen shot 2019-03-07 at 1 33 47 pm

    • [x] After fixing the size of the column, is there a way to not make the top chart expanded with the Detail Panel is shown?
    screen shot 2019-03-07 at 1 45 35 pm
    • [x] Is there a way to change the font for the data displayed (for consistency with my headers) as well? I tried doing:
            { cField: 'Subject', result: this.state.subject, headerStyle: { fontSize: 20}},
            { cField: 'Location', result: this.state.location, headerStyle: { fontSize: 20}}

    This is a pretty heavy post. Thank you in advance!

    help wanted 
    opened by brittanywang 54
  • Override plus button functionality for adding new table row

    Override plus button functionality for adding new table row

    Instead of using material-table predefined plus icon for adding new row, i want to add plus icon functionality to the Add new region button image attached below


    opened by iqasim-com 47
  • Add error state

    Add error state

    Related Issue

    Fix #744 Fix #1576 Fix #1152 Fix #1042 Fix #635 Fix #602 Fix #585 Fix #315 Fix #2086


    This PR add an error state to the table. If the data promise rejects or fails, the loading state will not be shown indefinitely, but instead an error message will be shown and a button to retry the last query, to try to fix the error.

    If onAdd/onEdit/onDelete fails, the reject will be caught and put into the error state as well. This will be passed to render, so the user can decide on how to show that error.

    In this context, a validate prop is added to the colum. It is a function and either return a boolean (for the red bar below), a string (for red bar and error text) and an object: { isValid: boolean, helperText?: string }. This validate can be done by the user e.g with yup or manually.

    Let me know what you think!

    Once this is done, a section should be added to the docs to explain these validation process.

    Impacted Areas in Application

    • prop-types
    • material-table
    • index / types
    • default props

    Additional Notes

    This is optional, feel free to follow your hearth and write here :) image

    enhancement feature waiting for author 
    opened by Domino987 42
  • Invalid prop type: Invalid prop `color` of value `inherit`

    Invalid prop type: Invalid prop `color` of value `inherit`

    I'm encountering this error lately (latest version of everything)

    index.js:1375 Warning: Failed prop type: Invalid prop color of value inherit supplied to ForwardRef(FormControl), expected one of ["primary","secondary"]. in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl))) in WithStyles(ForwardRef(FormControl)) (created by ForwardRef(TextField)) in ForwardRef(TextField) (created by WithStyles(ForwardRef(TextField))) in WithStyles(ForwardRef(TextField)) (created by MTableToolbar) in div (created by ForwardRef(Toolbar)) in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar))) in WithStyles(ForwardRef(Toolbar)) (created by MTableToolbar) in MTableToolbar (created by WithStyles(MTableToolbar)) in WithStyles(MTableToolbar) (created by MaterialTable) in div (created by ForwardRef(Paper)) in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper))) in WithStyles(ForwardRef(Paper)) (created by Container) in Container (created by MaterialTable) in Provider (created by App) in App (created by ErrorBoundary) in ErrorBoundary (created by DragDropContext) in DragDropContext (created by MaterialTable) in MaterialTable

    opened by masbaehr 42
  • Material Table freezes Browser

    Material Table freezes Browser


    • Please include a demo of the issue/behavior/question you have

    • Please try to be as detailed as possible

    • You may fork one of the following starter templates if you would like:

    Describe the bug A clear and concise description of what the bug is. Material Table freezes the screen when trying to reload new data. I have an input field and making a service call with that input field and adding the new data to the state(state contains the data supplied to the table). And also for every change in input value Material table is rerendered and it's slowing down the page

    To Reproduce Steps to reproduce the behavior:

    1. Enter value in input field
    2. Enter search button(Make a service call and update state with newdata)
    3. For the 2nd search the browser is becoming slow
    4. For the 3rd search the browser completely becomes unresponsive

    Expected behavior A clear and concise description of what you expected to happen. Material Table should not freeze the screen Screenshots If applicable, add screenshots to help explain your problem.

    Desktop (please complete the following information):

    OS: windows server 2016 standard(64 bit), Browser:Chrome Version:85.0.4183.102

    Smartphone (please complete the following information):

    • Device: [e.g. iPhone6]
    • OS: [e.g. iOS8.1]
    • Browser [e.g. stock browser, safari]
    • Version [e.g. 22]

    Additional context Add any other context about the problem here. Using Materiaa Table version 1.62.0

    opened by Sandy2691 38
  • Fix browser freeze-up due to unbounded column sizing calculations.

    Fix browser freeze-up due to unbounded column sizing calculations.

    Related Issue

    #2451 Material Table freezes Browser


    This PR fixes the bug that causes the width calculations to grow every time setColumns() is called. This occurs frequently and causes the value to grow unbounded, eventually freezing the browser.

    The check on columnDef.tableData.width occurs in the wrong order, after tableData.width is set. That causes it to always add to usedWidth, the root cause of the unbounded growth. https://github.com/mbrn/material-table/blob/master/src/utils/data-manager.js#L89

    The filter code, while compact, is terse and difficult to reason about. It's worth expanding out to improve maintainability. There's no real impact on performance. The ternary is just syntactic sugar. https://github.com/mbrn/material-table/blob/master/src/utils/data-manager.js#L63

    Impacted Areas in Application

    List general components of the application that this PR will affect:


    Additional Notes

    This may be related to #2685 #2650 #2643 #2581 #2514 #2486 #2451

    opened by peacechen 37
  • Material Table is not responsive

    Material Table is not responsive

    Material Table is not responsive. It only reduces the width of the table when shrinking a page. A lot of other table libraries create "stacked" table in mobile view (e.g. https://github.com/gregnb/mui-datatables). Is it possible to have this stacked table view in the near future? I reckon It would be nice to swap the table to Material UI list in mobile view.

    Taken from:MUI datatables

    Screen Shot 2019-11-28 at 2 38 21 PM enhancement help wanted wontfix feature 
    opened by kkateli 35
  • Bulk editing

    Bulk editing

    Is your feature request related to a problem? Please describe. It is very annoying to have to click over and over to edit multiple rows. There are many examples where users will have to edit each row in a table for user input data.

    Describe the solution you'd like There should be a way to open up editing on the entire table for bulk edits with a save and a cancel button.

    enhancement wontfix feature 
    opened by jakeleventhal 35
  • Draggable rows / rows reordering / drag & drop rows

    Draggable rows / rows reordering / drag & drop rows

    Related Issue

    This PR relates to #1219


    This PR implements the draggable rows feature. It has both full-row drag and drop, and left-most table cell with "=" icon to support drag and drop using only 1 column. Also - the content of the cell can support other components, so it's also possible to have an "draggable" icon for that.

    The "demo.js" has the implementation of both features.

    opened by dekelb 34
  • Deep fix for freezing of table

    Deep fix for freezing of table

    Related Issue

    Fixes #2486, Fixes #2453, Fixes #2451, Fixes #2404,


    This PR removes the while loop that caused the infinity loop in 1.69.0 and replaces it with a regex call to exchange the percentage value with the pixel value reducePercentsInCalc . calc((100% - (0px)) / 9) to calc((1054px - (0px)) / 9) or calc(calc((100% - (0px)) / 9) + -26px) to calc(calc((1054px - (0px)) / 9) + -26px).

    opened by Domino987 32
  • Add editComponent for cellEditable

    Add editComponent for cellEditable

    Related Issue



    When using cellEditable we can't make custom editComponent for cell

    Additional Notes

    How this works ?: First you need to add cellEditable for the table

        onCellEditApproved: (newValue, oldValue, rowData, columnDef) => {
          return new Promise((resolve, reject) => {
            console.log("new vault: ", newValue)
            setTimeout(resolve, 1000);

    then in the columns just pass the edit component

    editComponent: (props) => <Input fullWidth={true}
                onChange={e => props.onChange(e.target.value)}
    opened by MrLibya 0
  • custom page size slow performance

    custom page size slow performance

    When there is a page size of ~50 (or more) records, application feels slow when doing (next previous) on the table and and affected other components on the same page

    opened by afifhibatullahh 0
  • How to previously set page and sorting (programmatically)

    How to previously set page and sorting (programmatically)

    How to previously set page and sorting (programmatically)

    Since I use material-table for rendering a search result but i do have advanced search requirements, I had to go the route to not use the tables search fields with data loader but have to do the search triggering and retrieving the result externally. The result is passed in to the table via the data attribute.

    All this is not an issue, the only problem I am facing is, whenever the user hits the search again an the search result changes, I want toe paging and filtering to be reset to default. How can that be achieved? The search result (and therefore the data attribute) change but the rendered table stays at the previously selected state (page and filters)

    opened by kbrueckner 0
  • hiddenByColumnsButton not working

    hiddenByColumnsButton not working

    I would like to allow control of visibility of specific columns only. By the documantation setting hiddenByColumnsButton to true should hide column from columnsButton's options, but the column can still be selected in there.

    Show in table, but not in columns button Just set column.hiddenByColumnsButton to true (for single column) OR override the MTableToolbar component, setting prop columnsHiddenInColumnsButton to true (which effects all columns)


    Is there any other option how to specify columns that can be hidden by this control ?

    opened by ErikParso 0
  • FR: Ability to give the table a name

    FR: Ability to give the table a name

    Is your feature request related to a problem? Please describe. I would like to be able to pass a name to the base <table> element for testing purposes. If the table appears conditionally (ie: my app may show an error message instead of the table if there's a network error or similar) it would be nice to be able to do a simple const materialTable = await screen.findByRole("table", { name: "my-cool-table" }) using react-testing-library/jest.

    Currently, my only choice seems to be to check whether the string I pass for the title is there as the appropriate heading level: const tableHeading = await screen.findByRole("heading", { level: 6, name: "My Cool Table" })

    Would much prefer the former. Is there any way to assign that table name?

    opened by cjsilva-umich 0
  • Free action displaces regular actions

    Free action displaces regular actions

    Describe the bug Good day!

    Simply put, when I use a free action with other regular actions, the free action inserts a column/space into the regular actions section even though the free action is in the toolbar. Please see the images attached both with the free action and without. It's not a big deal for one free action, but with multiple it significantly displaces the actions in the table.

    Thanks for your time!

    To Reproduce Steps to reproduce the behavior:

    1. Create a table with both free and not free actions.
    2. Please see my code attached.
                isLoading={ props.isLoading}
                key={ props.pageSize }
                columns={ getColumns() }
                data={ getFormattedData(props.data) }
                options={ {
                    actionsColumnIndex: -1,
                    showTitle: false,
                    search: false,
                    pageSize: props.pageSize,
                    searchText: props.searchTerm,
                } }
                actions={ [
                        icon: () => <MoreVertIcon />,
                        tooltip: 'View details',
                        onClick: (event: React.ChangeEvent<HTMLInputElement>, rowData: {id: string}) => props.openViewDetailsDialog(rowData.id),
                        icon: () => <EditIcon />,
                        tooltip: 'Edit',
                        onClick: (event: React.ChangeEvent<HTMLInputElement>, rowData: {id: string}) => props.openEditDetailsDialog(rowData.id),
                        icon: () => <DeleteIcon />,
                        tooltip: 'Delete',
                        onClick: (event: React.ChangeEvent<HTMLInputElement>, rowData: {id: string}) => props.openDeleteMeterDialog(rowData.id),
                        icon: () => <LeaderboardIcon />,
                        tooltip: 'View meter readings',
                        onClick: (event: React.ChangeEvent<HTMLInputElement>, rowData: {id: string}) => props.openMeterReadingsDialog(rowData.id),
                        icon: () => <Refresh />,
                        isFreeAction: true,
                        tooltip: 'Refresh',
                        onClick: () => {
                ] }
                onSearchChange={ (value) => props.setSearchTerm(value) }
                components={ {
                    Pagination: paginationProps => (
                            { ...paginationProps }
                            rowsPerPageOptions={ [10, 20, 30] }
                            rowsPerPage={ props.pageSize }
                            count={ props.metersCount }
                            page={ props.page }
                            onRowsPerPageChange={ (event: any) => props.setPageSize(event.target.value) }
                            onPageChange={ (event: any, page: number) => props.setPage(page) }
                } }

    Expected behavior The expected behavior is when adding free actions which are in the toolbar, the actions in each row should not be affected.

    Screenshots free freeNot

    Desktop (please complete the following information):

    • OS: Windows and Linux
    • Browser: Chrome
    • Version: Version 108.0.5359.96

    Additional context Add any other context about the problem here.

    opened by DanJamesH 0
  • v1.69.0(Aug 23, 2020)

  • v1.68.0(Aug 2, 2020)

    Aug 02, 2020

    Version 1.68.0 published.

    Bulk Edit feature added. Missing hiddenByColumnsButton in typescript added. Thanks to @Shaquu Fix React warnings. Thanks to @armilam

    Source code(tar.gz)
    Source code(zip)
  • v1.67.0(Jul 26, 2020)

    Jul 26, 2020

    Version 1.67.0 published.

    #1471 Cell cell feature completed. fixed right fixed column sizing. Thanks to @viral-sh on shift + enter save added for text-area. Thanks to @vijaypushkin Added prop to support pagination on top, bottom, or both. Thanks to @macman2013 Add Info attribute about desc sort for customSort. Thanks to @Nolandos set currency as number instead of text. Thanks to @francescovenica Fix for boolean validation. Thanks to @Domino987 Correctly centers the boolean checkbox. Thanks to @Domino987 Added field 'initialFormData' to MaterialTableProps. Thanks to @szediwy

    Source code(tar.gz)
    Source code(zip)
  • v1.66.0(Jul 19, 2020)

    Version 1.66.0 published.

    fix React.node issue. Thanks to @developerdu Fix for validatewith string. Thanks to @Domino987 Changed the filtering in 'getTableData' to no longer exclude hidden columns. Thanks to Jared Stark Fix invalid expressions. Thanks to @HuangStomach guarding jsPDF to only import / run when window is present. Thanks to Florian Uhde Changes ISO dates to use date-fns's parseISO function instead of Date. Thanks to @ajmueller Adds a new table option which allows a user to pass properties to the select all checkbox in the table header. Thanks to Gunnar Bell

    Source code(tar.gz)
    Source code(zip)
  • v1.65.0(Jul 12, 2020)

    Version 1.65.0 published.

    Fix onChange when numeric value. Thanks to @francescovenica Fix typescript error TS2304: Cannot find name 'RowData'. Thanks to Sylvain Thénault Add error text to select field. Thanks to @Domino987 Add groupTitle to options. Thanks to @developerdu Do not show hidden columns in columnsButton. Thanks to @esjayrockz Approve edit/add on enter added. Thanks to @vijaypushkin

    Source code(tar.gz)
    Source code(zip)
  • v1.64.0(Jul 5, 2020)

    Version 1.64.0 published.

    Remove redundant recursive check. Thanks to @ifndefdeadmau5 onFilterChange is made to optional using 'filterOnItemSelect' columnDef. Thanks to Ashok Add error state. Thanks to @Domino987

    Source code(tar.gz)
    Source code(zip)
  • v1.63.0(Jun 28, 2020)

    Jun 28, 2020

    Version 1.63.0 published.

    Add function for exporting table as PDF in addition to the CSV option. Thanks to @jardon Add Pagesize to onChangePage callback. Thanks to @Domino987 datepicker localization fix. Thanks to Cem Warning in select filter when multiple lookups are used in same table. Thanks to @kreezire Prettifier added. Thanks to @Domino987

    Source code(tar.gz)
    Source code(zip)
  • v1.62.0(Jun 21, 2020)

    Jun 21, 2020

    Version 1.62.0 published.

    Added padding size property were needed. Thanks to @LeanderCoevoet add support for filter row styling. Thanks to Zagh Wagner Allow overriding of placeholder for editing fields. Thanks to @brianhuang822 add capacity to style the edit via editCellStyle prop. Thanks to clementf add capacity to style the detail panel column via detailPanelCol. Thanks to clementf Add align to tableCells from columnDef. Thanks to @Domino987 Trigger reorder if column default sort changed. Thanks to @Domino987 Added hideSortIcon true to TableSortLabel for actions. Thanks to @hooloovooo Added CSS font properties to inherit in cellStyle. Thanks to @mrjdavidfg Updated react-beautiful-dnd dependency. Thanks to @MglMX

    Source code(tar.gz)
    Source code(zip)
  • v1.61.0(Jun 14, 2020)

    Jun 13, 2020

    Version 1.61.0 published.

    change selection logic for disabled selections. Thanks to @code404sg Function giving tooltip text for Edit and Delete icons. Thanks to David Gregor add support for the date localization. Thanks to @yurykozyrev add missing onRowDataChange type declaration. Thanks to @hyphaene Fix off-by-one error for fixed table layouts. Thanks to @marc-lebourdais Remove hidden columns in computing the colspan of an empty tablecell. Thanks to @deltek-rossjackson nRowsSelected method to toolbar localization. Thanks to @ianwensink Update header alignment of currency header. Thanks to @pajohns

    Source code(tar.gz)
    Source code(zip)
  • v1.60.0(Jun 7, 2020)

    Jun 07, 2020

    Version 1.60.0 published.

    • Lookup filter stashing. Thanks to @Domino987
    • Fixed issue where icon columns (action, detail, tree etc.) would get the "extra" width leftover from hidden columns. Thanks to @ingvaldlorentzen
    • Removed color="inherit" from search InputAdornment. Thanks to @unfrgivn
    • Exit edit on esc. Thanks to @Domino987
    • Resolve pagination count issue with empty results. Thanks to @adammwood
    • Adding isEditHidden and isDeleteHidden to editable prop. Thanks to @chattling
    • New Editable props: onRowAddCancelled and onRowUpdateCancelled. Thanks to @HarshMjh
    • Add named pageSizeOption value. Thanks to @GorkyeMatt
    • Moved filtering of hidden items to reduce number of .filter() calls. @ingvaldlorentzen
    Source code(tar.gz)
    Source code(zip)
  • v1.59.0(May 31, 2020)

    May 31, 2020

    Version 1.59.0 published.

    Fixes the unnecessary PropType warning in #1387. Thanks to @BrendanGoggin fix: remove equality check on data prop function when remote data. Thanks to @giacomocerquone Fixed misaligned filter placeholder text when using lookup filters . Thanks to Ingvald Lorentzen Fix rows becoming locked when edit state is lost. Thanks to @AAron Allow React.ReactNode for certain localization strings. Thanks to @Svish remove unused variable. Thanks to @sajjadkarimi fix(typings): added missing 'width' type on Column interface. Thanks to @janvandenberg Fixed issue where parent detail panel would appear under all children. Thanks to Ingvald Lorentzen Checking props.data type to skip remote sorting. Thanks to @sandeepkumar-vedam-by

    Source code(tar.gz)
    Source code(zip)
  • v1.58.0(May 24, 2020)

    May 24, 2020

    Version 1.58.0 published.

    move search state to toolbar component to prevent rerendering. Thanks to Michał Krawczyk passing missing parameter to onSearchChanged method. Thanks to Michał Krawczyk Localization for FilterPlaceHolder. Thanks to @sshanzel Added searchAutoFocus to options. Thanks to @pradej Expose a cspNonce option and pass it to react-beautiful-dnd's DragDrop. Thanks to @ogenodisho Add the ability to chose the variant of the search text field. Thanks to @AchilleasMich Add aria-labels to all text fields. Thanks to @aitchiss update actions types to support current icon usage. Thanks to @xiaomaini add overflowY to types. Thanks to @mebuckler Disable add button when in edit mode. Thanks to @miktap Remove duplicate Options.searchText typing. Thanks to @skoging

    Source code(tar.gz)
    Source code(zip)
  • v1.57.2(Feb 7, 2020)

    Feb 07, 2020

    Version 1.57.2 published.

    Call onChangePage on changePageSize. Thanks to @Domino987 Remove redundant function generation. Thanks to @Domino987 Fix the error when lookup value is null. Thanks to @urbsny Adding Type searchText for options. Thanks to Prabhakara Rao fix(types): change void to any for promises return on editable callbacks. Thanks to @hyphaene Cell forwardRef boolean value warning solved.

    Source code(tar.gz)
    Source code(zip)
  • v1.57.0(Feb 5, 2020)

    Feb 05, 2020

    Version 1.57.0 published.

    Fix issue #1321: broken isEditable and isDeletable options. Thanks to @benrawn Allows the custom elements to accept the needed props. Thansk to @Domino987 #43 Fixed columns.

    Source code(tar.gz)
    Source code(zip)
  • v1.56.0(Jan 25, 2020)

    Jan 25, 2020

    Version 1.56.0 published.

    #783, dense padding applied to header cells too #1473, Title overflow adjusted #1263, tooltip added to column definition for headers #1472, horizontal scroll would be visible always for mobile devices

    Source code(tar.gz)
    Source code(zip)
  • v1.55.0(Jan 12, 2020)

    Jan 12, 2020

    Version 1.55.0 published.

    GroupTitle override option added. Thanks to @mbwatson Bugfix: marginTop in TableFilterRow. Thanks to @FastStim Fixed label of groupby chip misalignment issue. Thanks to @rajarshikhare overflowY added to options. Thanks to @mebuckler Missing property searchText in TS def. Thanks to @mlnarik Solves the problem when pagination changes dynamically. Thanks to @hrafaelveloso bugfix: string is not a column type. Thanks to @Domino987 Add column filter component. Thanks to @jeffsupancic

    Source code(tar.gz)
    Source code(zip)
  • v1.54.2(Dec 12, 2019)

  • v1.54.1(Nov 8, 2019)

    Nov 08, 2019

    Version 1.54.1 published.

    prevent actions icons re-render. Thanks to @kwiatkk1 props changed algorithm changed on componentDidUpdate disabling actions on non-editing row when table has any editing row functional actions problem resolved

    Source code(tar.gz)
    Source code(zip)
  • v1.54.0(Nov 8, 2019)

    Nov 08, 2019

    Version 1.54.0 published.

    Fixed bug connected with searchText and state. Thanks to @dimamalyshev onFilterChange added. Thanks to Ross Anderson Passing down props CellStyle to ColumnDef props. Thanks to @sshanzel Remove UNSAFE_componentWillReceiveProps. Thanks to @Domino987 Add typings for thirdSortClick. Thanks to @dsgriffin disable defaultSorting when sorting = false. Thanks to @sshanzel Make MTableEditRow's cells use cellStyle. Thanks to @PFayoux Added table option hideFilterIcons as a shortcut to hide all hideFilterIcon. Thanks to @rshep1 Fixed typescript definition for DetailPanel interface to use correct... Thanks to @ririvas

    Breaking Change:

    new position field added to actions. You can force an action to be row based even if selection is true. But isFreeAction field is removed. Please check this PR: https://github.com/mbrn/material-table/pull/1156

    Source code(tar.gz)
    Source code(zip)
  • v1.53.0(Oct 24, 2019)

    Oct 24, 2019

    Version 1.53.0 published.

    #968: Header checkbox is not working properly when grouping is enabled. Thanks to @martin-pepgit Fix Currency - Edit and Alignment. Thanks to @yonihorwitz Added iconProps prop to CustomIcon, removed style. Thanks to Dave. Add option to modify groupped row separator. Thanks to @t72o #1049: and keeps the fix for issue #910 in tact. Thanks to @oze4 Enable string in column field. Thanks to @MichalKalita Add clear to fitlerTextField. Thanks to @Domino987 Fixed bug where onChangeColumnHidden is called twice when clicking label. Thanks to @mikaelbr #1182 fixed. Thanks to @Domino987 #1183 fixed. Thanks to @Domino987 #1020 & #1075 fixed. Thanks to @brendon1555 Table Cell sytyle inherits color by default. Thanks to @DustinRobison Add minBodyHeight to available options. Thanks to @mfreeborn

    Source code(tar.gz)
    Source code(zip)
  • v1.52.0(Oct 7, 2019)

    Oct 07, 2019

    Version 1.52.0 published.

    Adds missing getFieldValue. Thanks to @Domino987 onQueryChange accepts query param. Thanks to @michal-kazmierczak change the return type of parentChildData to RowData | undefined. Thanks to @CoolCyberBrain Fix type definition for "parentChildData". Thanks to @CoolCyberBrain Possibility to sort column with 2 or 3 states. Thanks to @hrafaelveloso Add defaultExpanded handling to grouping functionality. Thanks to @dnn5b feat: foreign handling of pagination counters. Thansk to @spurreiter

    Source code(tar.gz)
    Source code(zip)
  • v1.51.0(Sep 29, 2019)

    Sep 29, 2019

    Version 1.51.0 published.

    #1018, Typo delete confirmation. Thanks to @camerz Add missing refresh icon and allow action.icon to be a RefComponent. Thanks to @lookfirst fix: Missing peer dep warning in yarn v2. Thanks to @eps1lon Fix togglePanel of onRowClick event handler. Thanks to @limgit Add aria-label type definition to localization interface. Thanks to @dominikkaegi

    Source code(tar.gz)
    Source code(zip)
  • v1.50.0(Aug 16, 2019)

    Aug 16, 2019

    Version 1.50.0 published.

    Fix ie11 array find error. Thanks to @emrekara37 Add onChangeColumnHidden to types def typescript and create new props. Thanks to @alejo-fracttal

    Source code(tar.gz)
    Source code(zip)
  • v1.49.0(Aug 15, 2019)

  • v1.48.0(Aug 9, 2019)

    Aug 09, 2019

    Version 1.48.0 published.

    freeCells key added. Thanks to @schornio Add third state to sort column. Thanks to Helder Veloso Updating package json with new pickers release. Thanks to @y3sh Add optional onColumnDragged callback property.Thanks to @dnn5b Fix row onClick typedef. Thanks to @KATT

    Source code(tar.gz)
    Source code(zip)
  • v1.47.0(Aug 8, 2019)

    Aug 08, 2019

    Version 1.47.0 published.

    Fix when drag column export csv column order bug. Thanks to @emrekara37 Reset current page in onFilterChangeDebounce when use remote data. Thanks to @mswindu Add draggable to typescript file. Thanks to @dvrylc Add onChangeColumnHidden callback property. Thanks to @dnn5b #906, tree defaultexpand feature added for rows.

    Source code(tar.gz)
    Source code(zip)
  • v1.46.0(Aug 7, 2019)

    Aug 07, 2019

    Version 1.46.0 published.

    Feat: add level param to functional rowStyle. Thanks to @theodore-koch Fix detail panel column alignment. Thanks to @emrekara37 Fix tree data selected rows. Thanks to @emrekara37 Override sortarrow icon. Thanks to @emrekara37

    Source code(tar.gz)
    Source code(zip)
  • v1.45.0(Aug 6, 2019)

  • v1.44.0(Aug 5, 2019)

  • v1.43.0(Aug 2, 2019)

    Aug 02, 2019

    Version 1.43.0 published.

    Title grouping error fixed. Thanks to @MaxLeiter Material-ui is now peerDependency. Thanks to @luzzif Removing 'isInit' from changePageSize to upload the pageSize. Thanks to @EduSantosBrito

    Source code(tar.gz)
    Source code(zip)
Mehmet Baran
Software Architect, Developer. Works as contractor
Mehmet Baran
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 83.7k Jan 3, 2023
☄️React Material Admin is a React template built with Material-UI

React Material Admin — Material-UI Dashboard Template

Flatlogic 1.4k Dec 30, 2022
Free and Open Source Admin for Tailwind CSS and React based on Google's Material Design.

Material Tailwind Dashboard React Material Tailwind Dashboard React is a free Admin Template based on two popular front-end technologies: Tailwind CSS

Creative Tim 83 Dec 25, 2022
React-crud-localstorage - A simple CRUD using React, TypeScript, Vite, Material UI and localStorage

React CRUD A simple CRUD using localStorage for a product's list. Live demo here

Fellipe Utaka 2 Feb 22, 2022
This is Clone of Gmail web Application built in React, redux(state management), firebase(auth and realtime db), material-UI (for only icons and buttons)

Intro This is a Clone of Gmail web Application built in React, redux(state management), firebase(auth and realtime db), material-UI (only icons and bu

Mr.kouhadi 4 May 20, 2022
A frontend framework for building admin SPAs on top of REST services, using React and Material Design.

admin-on-rest A frontend Framework for building admin applications running in the browser on top of REST services, using ES6, React and Material Desig

marmelab 399 Dec 21, 2022
React Material Design Icons – built with Pixo, Styled Components, and Styled System

React Material Design Icons Built with Pixo, Styled Components, and Styled System https://jxnblk.com/rmdi npm i rmdi // import icons individually for

Brent Jackson 132 Sep 16, 2022
Material Design component library for Mithril and React

Polythene Material Design component library for Mithril and React. Can be used as general-purpose component library that includes dialogs, cards, noti

Arthur Clemens 593 Dec 27, 2022
CbrMarketPlatform Frontend - The CBR Market Platform designs using React.js and Material UI

CBR Market Platform, Frontend Greeting from Harold澂冰! An Introduction to the mar

Harold澂冰 2 Jun 20, 2022
Modular and customizable Material Design UI components for the web

Material Components for the web Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX

Material Components 16.6k Dec 27, 2022
A boilerplate for start a developing with ReactJS, Material UI and TypeScript

This project was implemented with Create React App and is a boilerplate for start a developing with ReactJS, Material UI and TypeScript Features Suppo

Mohsen Lotfi 3 Feb 9, 2022
Material design for react, powered by materializecss

react-materialize Material design components for react, powered by materializecss. Install npm install [email protected] npm install react-material

React Materialize 1.4k Dec 24, 2022
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

React Toolbox 8.7k Dec 29, 2022
Free React Typescript Admin Dashboard Template built with Material-UI

Tokyo Free White Typescript React Admin Dashboard Free React Typescript Admin Dashboard Template built with Material-UI This free and open source admi

Horia S 193 Jan 4, 2023
React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

MDB 5 React React 17 & Bootstrap 5 & Material Design 2.0 UI KIT >> Get Started in 4 steps >> MDBReact 5 Demo 500+ material UI components Super simple,

MDBootstrap 1.3k Jan 3, 2023
Stateless UI components for react that follow material design

Material Components Stateless UI components for react that follow material design. Introduction material-components is a library of React (15.0.0) use

Garth Williams 99 May 19, 2022
CRUD Web React e Material UI

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Anderson 1 Nov 10, 2021
A user script to assist in switching search engines, build with React.js & Material-UI

A user script to assist in switching search engines, build with React.js & Material-UI

null 199 Dec 30, 2022
React, TypeScript, Material-UI boilerplate by Welcome, Developer.

React, TypeScript, and Material-UI boilerplate Introduction Welcome to the first app template built by Welcome, Developer! This is a boilerplate app b

WelDev 1 Sep 1, 2022