Describe the bug

The prop hiddenByColumnsButton is documented on material-table.com along with the hidden prop. The latter completely removes the columns. They don't render either in the table or in the columnsButton selector. Use case is that some columns should be hidden initially, but selectable if the user chooses to show them.

https://github.com/mbrn/material-table/search?q=hiddenByColumnsButton

To Reproduce
Create a columns array and pass it to material-table. Any of the columns with the field hidden are not visible in the column selector menu that's enabled by options.columnsButton. I hoped that hiddenByColumnsButton would allow them to remain in the menu and hide them in the table, but unfortunately it doesn't have any effect when set in the columns data.

      <MaterialTable
        columns={columns}
        options={{
          columnsButton: true,
        }}
      />

Hello all,
Thanks for keeping this project alive !
I am using latest version of @material-table/core.
I have a table with custom rendering in a column, that displays a clickable icon. Every time it is clicked, a state is changed to open a Dialog.
However, everytime it is done, the state of the table is lost, i.e. if any column sortering has been set up, it is lost. Similarly, I am also using tree data, and if some rows have been expanded, everything is collapsed like in initial state.

Do you have any idea of how to avoid this behaviour and keep the current table state ?

Please review the Roadmap before submitting an issue/PR.

Description

see MUI 5 compatibility #2542

Additional Notes

Maybe add a @next branch for MUI 5

Guidelines

Is there a way to turn these console message off?

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

• Browser console is getting spammed with "rendering cell..." messages

Guidelines

I have a small problem when activating the grouping feature. The grouping cell does not take into account the "colSpan" property.

Screenshoot bellow

The colSpan is provided by the MTableGroupRow to the MTableCell component but not used in the MTableCell component.

Proposed fix:

 return (
    <TableCell
      size={props.size}
      colSpan={props.colSpan} // SET THE COLSPAN TO THE TABLE CELL
      value={props.value}
      style={getStyle(props)}
      align={cellAlignment}
      onClick={handleClickCell}
      ref={props.forwardedRef}
    >
      {props.children}
      {renderValue}
    </TableCell>
  );

MTableCell.propTypes = {
  columnDef: PropTypes.object.isRequired,
  value: PropTypes.any,
  rowData: PropTypes.object,
  errorState: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
  forwardedRef: PropTypes.element,
  size: PropTypes.string,
  colSpan: PropTypes.number, // ADD THE COLSPAN IN THE PROP TYPES
  children: PropTypes.element,
  cellEditable: PropTypes.bool,
  onCellEditStarted: PropTypes.func
};

Expected rendering:

I'm trying to override the Action component to return a custom selector that allows a user to utilize a preconfigured filter.
The state, memos, etc of my component get fully reset when the table data changes, not sure exactly what's going on here.

Minimal reproducible sandbox:
https://codesandbox.io/s/pedantic-rubin-ywvk6

as core's docs is wip, I'm still referring to the mbrn version.

seems you can't do what the second example here shows when using typescript

the simple solution is adding a question mark in index.d.ts:

I think it should be safe as the implmentation takes both arguments as optional:

After upgrading from 2.3.24 to 2.3.26, I've started having a rending issue with action icons both in the toolbar and in the rows.

The addition of an additional div to the markup seems to be the culprit.

Screenshots

Demo

https://repl.it/@Mohron/MaterialTableActionIconBug

Old Markup (Action Cell)

<td class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone" style="width: 144px; padding: 0px 5px; box-sizing: border-box;">
   <div style="display: flex;">
      <button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit" tabindex="0" type="button" title="Duplicate">
         <span class="MuiIconButton-label">
            <svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
               <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"></path>
            </svg>
         </span>
         <span class="MuiTouchRipple-root"></span>
      </button>
      ...
   </div>
</td>

New Markup (Action Cell)

<td class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone" style="width: 144px; padding: 0px 5px; box-sizing: border-box;">
   <div style="display: flex;">
      <div>
         <button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit" tabindex="0" type="button" title="Duplicate">
            <span class="MuiIconButton-label">
               <svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"></path>
               </svg>
            </span>
            <span class="MuiTouchRipple-root"></span>
         </button>
         ...
      </div>
   </div>
</td>

When table display items in tree data mode and grouping is enable the table throws error:

It is reproduceable in material-table doc example: https://material-table.com/#/docs/features/tree-data

Please open an issue (or PR) for any urgent issues you may have!

We are actively deploying here.

Simply change your imports to @material-table/core to get the latest updates.

We will remain compatible with mbrn/material-table, as we plan on pushing all changes eventually.

onBulkUpdate: changes =>
new Promise((resolve, reject) => {
setTimeout(() => {
console.log(changes);

                resolve();
            }, 1000);
        }),

when we using bulk upload. In material-table we get only those rows which are changed rows but in material-table-core we are getting all rows.

Hi there!

Version: "@material-table/core": "^2.3.24",

In "node_modules/@material-table/core/dist/components/MTableCell/utils.js" there is a bug.

At line 109 and 113 there is:

/*#__PURE__*/ React.createElement(props.icons.Check, {

This should be:

/*#__PURE__*/_react["default"].createElement(props.icons.Check, {

And ofcouree import "_react" at the top:

var _react = _interopRequireDefault(require("react"));

Guidelines

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

Demo: https://codesandbox.io/s/jolly-minsky-de7b9?file=/src/App.js

Describe the bug
Enabling filtering and using lookup in a column to create a drop down with selectable options causes an error ReferenceError: props is not defined. I can select different options, but there is no filtering and I cannot exit out of the selection by clicking off or pressing esc.

To Reproduce
Steps to reproduce the behavior:

1. Create a MaterialTable with filtering enabled.
2. Set up lookup in one of the columns.
3. Try filtering with that column and exiting the selection.
4. See error

Expected behavior
Selecting one or more of the options should filter the data and allow me to exit out of the selection.

Desktop (please complete the following information):

• OS: [e.g. iOS] Linux
• Browser [e.g. chrome, safari] Firefox
• Version [e.g. 22] 2.3.2

Issue when editing a cell in grouped data. Localization is undefined when it reaches MTableEditCell (which is a required prop).

Will upload a demo tomorrow.

Describe the bug
ok, while now I can at least see the export button and can export the data as PDF or CSV, clicking this button ONLY exports visible data from the browser. If I change the ExportPdf() function by supplying it with an array of all of my data, I get a report with blanks i.e. not data gets exported..just column headers and several pages of blank rows underneath.

For CSV, If I include the entire dataset array, I get an error..see below

TypeError: console.err is not a function

node_modules/@material-table/exporters/csv/index.js

return col.title;
    })).addRows(Array.from(data)).exportFile();
  } catch (err) {
    console.err("err in ExportCsv : ".concat(err));
  }
}

I tried to add console.log() to see the data and can see all 175 JSON objects. As it stands, the export is not useful as we can't expect users to export every single page individually .. is there anything I am missing here? I've updated the sandbox to reflect this and you will find exactly identical results..

To Reproduce

https://codesandbox.io/s/elegant-lalande-3teq8?file=/src/App.js

Expected behavior

MT should allow ALL data to be exported as PDF and CSV, not just visible data. Also, it would be an added bonus if we can export the Title.

Reports of unnecessary rerenders include:

• #48
• #51

These issues appear to be related to the same change.

Please comment here if you are having issues with rerenders.

Not sure whether this is a known issue - I also tried to fix it already but it does not seam trivial:

• Let's start by some tree data.
• We search something, so that we find a value that has an editable child
• We open the row and edit a value
• Now the table rerenders and the collapse state resets to the state when the search was issued, so the child we just edited is collapsed again.

I saw this happening both on Linux and on MacOS, both on Chrome and on Firefox.

Guidelines

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

• Please try to be as detailed as possible

I have a functional component which uses MT's bulk update feature. Everything works as expected so, no issues there though... What I noticed is, after clicking the 'Edit' (Pencil Icon) button on the top right corner, all editable elements get enabled for the user input and user can update values in those elements. The issue is, user MUST click the tick (correct icon) in order to ACCEPT those changes, if user miss to ACCEPT those changes and move to the next\previous page or say click a command button on the page, user will end up losing their changes.

Is there any way to force user to ACCEPT or REJECT their changes when they perform activities like this? i.e. clicking any other button etc? I have a SAVE and CANCEL command buttons to save changes to the database via API, Ideally I would like to ACCEPT all outstanding changes on the page before running button's click handler.

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

  • CodeSandbox

  • StackBlitz

Currently I discovered two accessibility issues of the table using https://accessibilityinsights.io/

• Expand row button doesn't have a name / title. This is visible when you have a detailPanel in the table. https://accessibilityinsights.io/info-examples/web/button-name

  Adding a "title" attribute should fix the issue

• Checkbox filter button doesn't have a label. This filter is visible when you set the column type to 'boolean' and enable filtering. https://accessibilityinsights.io/info-examples/web/label

  Here is how material-ui suggests the fix https://next.material-ui.com/components/checkboxes/#accessibility

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

https://codesandbox.io/s/material-table-starter-template-forked-6snxl?file=/src/index.js

Describe the bug
I cannot find a way of having an action icon that sticks on the toolbar when i have selection option true. They all disappear or appear on selecting or not rows.

To Reproduce
Steps to reproduce the behavior:

1. Go to one of selection box
2. Click on it
3. See error, no combination of icon actions objects for toolbar stays on the toolbar consistently

Expected behavior
At least one action option should be sticky, position: 'toolbar'. For example there exists the position: 'toolbarOnSelect' and it presents the same behaviour of position: 'toolbar'.

Additional context
Version on table "@material-table/core": "^2.3.26"

When using an overridden Search component to replace the built-in search bar, focus is lost when the parent table component re-renders due to a data change.

When you use the built-in search functionality, i.e. options: {search: true}, then you can focus and type in the bar, through rerenders. In my case, I have polling going on. If you then do options: {search: false} and then insert your own input component with a Search component override, the input loses focus with each change to the table's input data.

Example: https://codesandbox.io/s/agitated-einstein-xs6f0?file=/src/MTable.js

To Reproduce
Use a custom search component in the table, and attempt to type in the resulting search bar with a polling (i.e. setTimeout) running that changes the table's data set periodically.

Expected behavior
When using a custom search component, focus is not lost when the table re-renders (presumably due to a data change)

Desktop (please complete the following information):

• OS: MacOS Big Sur (Intel)
• Browser Chrome
• Version 88

Any idea what to do?

npm ERR! Found: @material-ui/[email protected]
npm ERR! node_modules/@material-ui/core
npm ERR!   @material-ui/core@"4.11.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @material-ui/core@"4.0.1" from @material-table/[email protected]
npm ERR! node_modules/@material-table/core
npm ERR!   @material-table/core@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

I wanted to migrate from material-table to material-table-core, but ran into the following issue:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `ClickAwayListener`.
    in MTableEditRow (at ...)
    in ClickAwayListener (at ...)
    in EditRow (created by MTableBody)

This warning is triggered by the following code fragment:

<MaterialTable>
   components={{
      EditRow: editRowProps => (
              <ClickAwayListener
                onClickAway={() => editRowProps.onEditingCanceled(editRowProps.mode, editRowProps.data)}
              >
                <MTableEditRow {...editRowProps} />
              </ClickAwayListener>
            )
   }}
   ...
</MaterialTable>

The idea behind the code is to cancel the row editing in case of clicking anywhere outside the row being edited.
Maybe there is a different way how that behaviour could be achieved. That would be fine for me, too.

Codesandbox: https://codesandbox.io/s/material-table-sorting-bug-mdzsx

Description
Our sorts are no longer persisting through rerenders for client-side data-driven tables (tables where an array is passed in for the data). (Note: if you switch to material-table v1.59.0 in the Codesandbox example, the bug disappears.)

To Reproduce
In sandbox, sort by one of the columns, then click one of "Set" buttons.

Expected Behavior
The sort persists after clicking the "Set" button.

Actual Behavior
The sort is reset to the initial sort after clicking the "Set" button.

Environment
OS: macOS
Browser: Chrome
Version 87.0.4280.88 (Official Build) (x86_64)

@date-io/date-fns 2.x is incompatible with @material-ui/pickers 3.x which causes crash when editing row with date type field.
Please downgrade version of @date-io/date-fns to 1.x (e.g. "^1.3.13").

See also:
https://material-ui-pickers.dev/getting-started/installation
https://stackoverflow.com/questions/59600125/cannot-get-material-ui-datepicker-to-work

When editing a row, changing a cell causes an error to be logged to the console

Warning: State updates from the useState() and useReducer() Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().

Problem seems to be in core/src/components/MTableEditRow/index.js. Looks like callback in setState (L129 & L136) should be changed to a useEffect.

Reproduce

1. Create a table with one line of data and set the rows to be editble.
2. Edit the row (And when you type the error appears in your console)

Per #9

Guidelines

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

As I just had to revert my code and fall back to the TABLE from material-ui, I don't have the actual code but can explain in detail what happened and what is expected

• Please try to be as detailed as possible

So, here I have a Dialog form which pops-up when user clicks a button to add notes\remarks. The form receives all current persisted remarks as PROPS. I use this PROPS JSON element to extract REMARKS JSON

e.g. the PROPS would look like ..

{
  applicationID: 1234,
  remarks: [
                    {remarkID: 1, remark: 'Remark details 01', createdAt: '2021-02-10', createdBy: 'TEST_USER'},
                     {remarkID: 2, remark: 'Remark details 02', createdAt: '2021-02-10', createdBy: 'TEST_USER'},
                     {remarkID: 3, remark: 'Remark details 03', createdAt: '2021-02-10', createdBy: 'TEST_USER'},
              ]
}

let remarks = props.remarks;

below array is my column definition ...

const columns = [
  { field: "remark", 
    title: "Remark", 
    cellStyle: {
      width: 650,
      minWidth: 650,
    },
    headerStyle: {
      width: 650,
      minWidth: 650,
      //whiteSpace: 'nowrap',
    } },
  { field: "createdAt", title: "Added On", 
  cellStyle: {
    width: 30,
    minWidth: 30,
    whiteSpace: 'nowrap',
  },
  headerStyle: {
    width: 30,
    minWidth: 30,
    whiteSpace: 'nowrap',
  }  },
  { field: "createdBy", title: "Added By",
  cellStyle: {
    width: 30,
    minWidth: 30,
    whiteSpace: 'nowrap',
  },
  headerStyle: {
    width: 30,
    minWidth: 30,
    whiteSpace: 'nowrap',
  } },
];

I use the remarks element from the above JSON object as my input to the MaterialTable

<MaterialTable
                   title="Remarks"
                   icons={tableIcons}
                   columns={columns}
                   data={remarks}
                   options={{
                     
                     showTitle: true,
                     isLoading: true,
                     headerStyle: {
                       backgroundColor: "#01579b",
                       color: "#FFF",
                     } 
                   }}
                   
                 />

The have a FORMIK form which is a simple one textEdit style element for user to add new REMARK with an OK and CANCEL button. Once user add a new Remark and press the 'OK' button. I make an API call to save the new remark ..everything works fine up to here..

The issue is when I PUSH the new remark in the REMARKS array as a new JSON object, the MaterialTable doesn't reflect that change. I even tried to use REMARKS as a state variable with hooks e.g.

const [remarks, setRemarks] = useState(props.remarks)

and tried to set the new element in the remarks using the setRemarks() in the form submit event post API call. Still the table won't refresh. It seems like the table is just independent by itself post rendering and won't bother to listen to data changes.

I know that I can use the 'EDITABLE' feature of the MaterialTable and allow user to directly add\update row like the one below but that's not how I want my UI to look\behave...

editable={{
onRowAdd: newData =>
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    setData([...remarks, newData]); 

                    resolve();
                }, 1000);
            }),
}}

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

  • CodeSandbox

  • StackBlitz

Describe the bug

Simple. MaterialTable fails to re-render itself when the underlying data changes.

To Reproduce
Steps to reproduce the behavior:

Try to use above snippets of code to create a React functional element to reproduce the issue or simply you can see this in your own MaterialTable implementation by updating the data values.

Expected behavior

All I expect MaterialTable to do is to reflect changes to the underlying data when the data gets updated. A stale data table doesn't serve much purpose.

Screenshots

don't have any as I created this bug AFTER I had reverted my code to use simple Material Table from material-ui

Desktop (please complete the following information):

• OS: [e.g. iOS] Mac Os Mojave
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] Version 88.0.4324.96 (Official Build) (x86_64)

Smartphone (please complete the following information):
N/A

Additional context

Hope someone has an answer or a workaround else it's a bug and needs be addressed as it is a basic requirement for any data table to refresh itself

When adding a detailPanel to a Table, it tries to use a function that doesn't exist.

It happens in core/src/components/MTableHeader/index.js And the following function should be added (I think, I quickly tested it :) )

function renderDetailPanelColumnCell() {
    return (
      <TableCell
        padding="none"
        key="key-detail-panel-column"
        className={props.classes.header}
        style={{ ...props.headerStyle }}
      />
    );
  }

Hi, in "memory" of this open issue of the original material-table;

mbrn/material-table#2164

i think a solution of this should be found mid to long-term. The usage of jspdf is simply an overkill, it should be removed from the original project - and the export to PDF should be somehow externalized.

So this would break 100% compatibility - but for this i'd simply make an exception as the bundle size is too big for a table component as it is now.

The export button is missing, How do I enable it?

Update: Not a bug, but a duplicate icons prop passed to MaterialTable.

Describe the bug
In a TS environment, the icons prop rejects all attempts to pass it an icon to replace

No overload matches this call.
Overload 2 of 2, '(props: MaterialTableProps, context: any): MaterialTable', gave the following error.
Type '{ ViewColumn: JSX.Element; }' is not assignable to type 'Icons'.
Types of property 'ViewColumn' are incompatible.
Type 'Element' is not assignable to type 'ForwardRefExoticComponent<RefAttributes>'.
Overload 2 of 2, '(props: MaterialTableProps, context: any): MaterialTable', gave the following error.
Type 'Element' is not assignable to type 'ForwardRefExoticComponent<RefAttributes>'.ts(2769)
index.d.ts(42, 3): The expected type comes from property 'icons' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<MaterialTable> & Readonly<MaterialTableProps> & Readonly<...>'
index.d.ts(289, 3): The expected type comes from property 'ViewColumn' which is declared here on type 'Icons'

To Reproduce
Example:

      <MaterialTable
        ...
        icons={{ViewColumn: <div/>}}
      />

The same error happens regardless of what's passed in place of <div/>. I've tried <Icon/> and even what's in the original source code forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />.

The TS definitions look overly restrictive. It would be much more useful if it accepted any component:
https://github.com/material-table-core/core/blob/master/types/index.d.ts#L256

Expected behavior
Replace the given toolbar icon with supplied component.

Describe the bug

This bug is similar to #94. The difference is that both the columnsButton key in the options prop and the actions prop are specified.
From experimentation on the rendered output, flex:1 should be added to the parent <div> containing the button <span>s.

To Reproduce

<MaterialTable
  ...
  options={{
    search: true,
    columnsButton: true,
  }}
  actions={[
    {
      icon: RefreshIcon,
      tooltip: 'Refresh',
      isFreeAction: true,
      onClick: onRefetch,
    }
  ]}
/>

Expected behavior
All toolbar buttons render in a row.

Screenshots

Desktop (please complete the following information):

• OS: OSX (OS shouldn't matter)
• Browser Chrome
• Version 88.0.4324.192

TS Type:

Implementation:

Data is a single value from RowData and not all RowData as the type says. Not sure how to type it correctly since the type depends on which property the column references but I do believe it can be made more accurate than it currently is.

I think this had been posted in the mbrn project somewhere but maybe we can find the solution for it.

I'm not entirely sure yet when it happens. Just saw this in the console. Will try to isolate the issue and post more information

Stacktrace:

Warning: NaN is an invalid value for the marginLeft css style property.
in span (created by ForwardRef(ButtonBase))
in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase)))
in WithStyles(ForwardRef(ButtonBase)) (created by ForwardRef(IconButton))
in ForwardRef(IconButton) (created by WithStyles(ForwardRef(IconButton)))
in WithStyles(ForwardRef(IconButton)) (created by ForwardRef(SwitchBase))
in ForwardRef(SwitchBase) (created by WithStyles(ForwardRef(SwitchBase)))
in WithStyles(ForwardRef(SwitchBase)) (created by ForwardRef(Checkbox))
in ForwardRef(Checkbox) (created by WithStyles(ForwardRef(Checkbox)))
in WithStyles(ForwardRef(Checkbox)) (created by MTableBodyRow)
in td (created by ForwardRef(TableCell))
in ForwardRef(TableCell) (created by WithStyles(ForwardRef(TableCell)))
in WithStyles(ForwardRef(TableCell)) (created by MTableBodyRow)
in tr (created by ForwardRef(TableRow))
in ForwardRef(TableRow) (created by WithStyles(ForwardRef(TableRow)))
in WithStyles(ForwardRef(TableRow)) (created by MTableBodyRow)
in MTableBodyRow (created by MTableGroupRow)
in MTableGroupRow (created by MTableBody)

Resources

mbrn/material-table#2727

mbrn/material-table#2733

Description

Memory leak when updating table data/editing cell.

Possible Solution

Apparently, this bug was introduced in all versions greater than or equal to mbrn/material-table v1.68.2, as mbrn/material-table v1.68.1 does not have this issue.

Guidelines

Describe the bug

Unable to import exporters when following the instructions on the docs: https://material-table-core.com/docs/api/props/options#exportmenu

To Reproduce

import { ExportCsv, ExportPdf } from "@material-table/core/exporters";

Problem:

Could not find a declaration file for module '@material-table/core/exporters'. 'node_modules/@material-table/core/exporters/index.js' implicitly has an 'any' type.
  Try `npm install @types/material-table__core` if it exists or add a new declaration (.d.ts) file containing `declare module '@material-table/core/exporters';`  TS7016

    1 | import React from "react";
    2 | import MaterialTable from "@material-table/core";
  > 3 | import { ExportCsv, ExportPdf } from "@material-table/core/exporters";

Expected behavior

Be able to import the exporters.

Add any other context about the problem here.

package.json:

"@material-table/core": "^2.3.23",

Typescript 3.9.7

Hey guys,
I already asked the following question in the material-table repository, but as you know it has become very quiet over there.

I am using the remote data feature of material-table-core and want the table data be updated on a regular interval like every 2 seconds.

For that i use the useEffect() hook which calls onQueryChange() on a tableRef.
See https://codesandbox.io/s/material-table-flickering-forked-9d2w5 for an example.

Everything works as expected besides whenever I call onQueryChange(), the whole table is rerendered.

My expectation is that only the table data should be rerendered in the same way as when you change the table data directly by setting a new array to the data prop.

Is there a way to use onQueryChange() or some other method to make material-table only rerender the data and not the whole table?

PR: mbrn/material-table#2344

This PR fixes exporting of remote data when exportAllData property is set.

Describe the bug
When the detailPanel prop is provided to add an accordion to each row, a caret is added to the left side of each row. The header in the space above that does not get the same styling as other column headers. Refer to screenshot below.

To Reproduce

        <MaterialTable
          ...
          detailPanel={renderDetailPanel}
        />

Expected behavior
The (grey) background color of the header should extend to all across to the left edge of the header row.

Screenshots

Hello,
I have been using material-table so far, with the "Esport as CSV" feature.
As soon as I migrated to the last version of material-table-core, without changing anything in my code, the export feature disappeared.
Do you have any idea ?

In some components we're using rowData[colDef.field] to access and write value while others use getFieldValue and setByString helpers which supports dot notation property access.

getFieldValue code:

  getFieldValue = (rowData, columnDef, lookup = true) => {
    let value =
      typeof rowData[columnDef.field] !== "undefined"
        ? rowData[columnDef.field]
        : byString(rowData, columnDef.field);
    if (columnDef.lookup && lookup) {
      value = columnDef.lookup[value];
    }

    return value;
  };

setByString code:

export const setByString = (obj, path, value) => {
  var schema = obj; // a moving reference to internal objects within obj

  path = path.replace(/\[(\w+)\]/g, ".$1"); // convert indexes to properties
  path = path.replace(/^\./, ""); // strip a leading dot
  var pList = path.split(".");
  var len = pList.length;
  for (var i = 0; i < len - 1; i++) {
    var elem = pList[i];
    if (!schema[elem]) schema[elem] = {};
    schema = schema[elem];
  }

  schema[pList[len - 1]] = value;
};

Components:

m-table-edit-row.js line 26

Should use setByString

  createRowData() {
    return this.props.columns
      .filter((column) => 'initialEditValue' in column && column.field)
      .reduce((prev, column) => {
        prev[column.field] = column.initialEditValue;
        return prev;
      }, {});

m-table-edit-row.js line 40 to 43

NOTE: this ain't wrong but is replicating getFieldValue code, it would be better to use the helper

  const value =
    typeof this.state.data[columnDef.field] !== 'undefined'
      ? this.state.data[columnDef.field]
      : byString(this.state.data, columnDef.field);

m-table-edit-cell.js line 13

Should use getFieldValue

    this.state = {
      isLoading: false,
      value: this.props.rowData[this.props.columnDef.field]
    };

m-table-edit-cell.js line 67

Should use getFieldValue

      this.props.cellEditable
        .onCellEditApproved(
          this.state.value, // newValue
          this.props.rowData[this.props.columnDef.field], // oldValue
          this.props.rowData, // rowData with old value
          this.props.columnDef // columnDef
        )

https://material-table-core.com/docs/api/props/options#exportmenu

See the ::: info line.

https://material-table.com/#/docs/features/sorting

The current sorting icon is hidden by default and needs to be activated to see it.
How to make it show by default.

thanks bro.

Per #70 (comment)

@pbr0ck3r

I was getting this issue after upgrading to 2.3.7 when I built my code for production and it was live, but running locally not it ran just fine did not show any errors.

const details = (rowData) => {
     <span>bob</span>
}
<MaterialTable
        columns={columns}
        data={data}
        title=""
        detailPanel={details}
        options={options}
        onRowClick={(event, rowData, togglePanel) => {
          togglePanel(rowData.tableData.id);
        }}
      />

Once I added the render in the detailPanel it worked just fine before build and after. Would be nice to throw a error if you are forgetting to pass in render. Code after looked like this:

<MaterialTable
        columns={columns}
        data={data}
        title=""
        detailPanel={[{ render: details }]}
        options={options}
        onRowClick={(event, rowData, togglePanel) => {
          togglePanel(rowData.tableData.id);
        }}
      />

Can we pull in this pull request from the main repo?

mbrn/material-table#2655

Original issue here:
mbrn/material-table#2654

exportMenu option is not working from version 2.3.6

Guidelines

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

Demo

• Please try to be as detailed as possible

I want to export the data in my table to a csv. I followed the code here, but I do not know how to get the export button to show up. Do I need to create my own? I tried on versions 2.3.6 and 2.3.8.

Hi, all. Thanks for your work on this!

I found another one. The issue appears to have been introduced in v2.3.5. Here's the CodeSandbox . If you switch between v2.3.4 and v2.3.5 it goes away and appears again.

Description
Specifying a render method in for the detail panel breaks the table in the latest version.

The error message shown is:
ReferenceError
renderDetailPanelColumnCell is not defined

To Reproduce
See CodeSandbox. It appears right away.

Or if you add this to any table it looks like you'll see it:

detailPanel={[ { render: (rowData) => <span>bob</span> } ]}

Desktop:

• OS: macOS
• Browser chrome
• Version 87.0.4280.88 (Official Build) (x86_64)