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.

• [x] Is there another way to change the column/cell styles? I tried what was suggested in issue (#261) as in:

columns=
{ title: 'Name', field: 'name',
     cellStyle: {
       width: 20,
       maxWidth: 20
     },
     headerStyle: {
       width:20,
       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:

• [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?

• [x] Is there a way to change the font for the data displayed (for consistency with my headers) as well? I tried doing:

data={[
        { 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!

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

Related Issue

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

Description

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

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

Guidelines

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

  • CodeSandbox

  • StackBlitz

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

Related Issue

#2451 Material Table freezes Browser

Description

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:

data-manager.js

Additional Notes

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

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

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.

Related Issue

This PR relates to #1219

Description

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.

Related Issue

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

Description

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

Related Issue

#2700

Description

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

<MaterialTable
  cellEditable={{
    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}
            type={'text'}
            placeholder={props.columnDef.title}
            value={props.value}
            onChange={e => props.onChange(e.target.value)}
            style={{}}
          />

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

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)

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)

https://codesandbox.io/s/material-table-with-hidden-columns-forked-ojcl7h?file=/src/Components/TestList.jsx

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

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?

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.

<MaterialTable
            isLoading={ props.isLoading}
            key={ props.pageSize }
            columns={ getColumns() }
            data={ getFormattedData(props.data) }
            options={ {
                actionsColumnIndex: -1,
                showTitle: false,
                search: false,
                pageSize: props.pageSize,
                pageSizeOptions:[10,20,30],
                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: () => {
                        props.setInitialLoadingState()
                    }
                },
            ] }
            onSearchChange={ (value) => props.setSearchTerm(value) }
            components={ {
                Pagination: paginationProps => (
                    <TablePagination
                        { ...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

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.