material-table/Lobby

Domino987

@Domino987

ok did you check the tabledata obejct?

Lodnec

@Lodnec1_twitter

I'll try, thanks

Lodnec

@Lodnec1_twitter

tableRef .current always return null, novice at this, please advise how can I track the event. Thanks in advance

Lodnec

@Lodnec1_twitter

I think I got the event. What are the input? path = [0] ? how about render

Domino987

@Domino987

@Lodnec1_twitter https://codesandbox.io/s/material-table-starter-template-forked-xvqtpl does this help

Lodnec

@Lodnec1_twitter

it works, this is the magic=> tableData: { showDetailPanel: i === 0 ? () => undefined : undefined }

I still don't understand, wow, thanks,

Domino987

@Domino987

Let me explain. We add a table data object to each row to track the 37482914 things that can happen to a row, edit, panel, clicked etc. It is normally hidden to the user. The detail panel is tracked by adding the function for the detail panel to the showDetailpanel key of tables data. If the user provides a ta leData object they will get merged. With the index is 0 you only add the showDetaolPanel to the first row. And now the showDetailpanel is set for the first row, we assume it's clicked and we show the panel on init

Lodnec

@Lodnec1_twitter

thanks for the detail explanation, it helps

Eban Emmanuel

@eebbann

@Domino987 tried your material-formik table but doesnt save when trying to update https://codesandbox.io/s/ty094?file=/src/index.js

Domino987

@Domino987

@eebbann You have to save it in onRowUpdate, but how and where you want to save it, is your choice, we just give you the new data. It has to be passed back to the data prop of the table at one point though

1 reply

<I_AM_IDRIS/>

@agboolaidris

I have a challenge using Material-table with MUI5, I don't know if anyone has any idea on how to set it up

Domino987

@Domino987

use the community fork material table core with the next tag

npm i @material-table/core@next

Yasin Aslan

@aslan50

Hello, i just started to explore React and found material-table. I see only examples with Pagination. I wonder if it is possible to display the data via vertical scrolling instead of Pagination. Is there a way ?

Domino987

@Domino987

Hi, of course. Just set options pagination to false. Do you use ts or js?

Yasin Aslan

@aslan50

Thanks for reply. If its so easy :). Im using js. Do you know if i could manage loading data on scrolling ?

Domino987

@Domino987

Infinity loading is not supported as far as I know

HaullingLlama

@HaullingLlama

First off, @Domino987 thanks for being the Lone Ranger in supporting the material-table library!

Second, when in edit mode for a row I need to open a dialog on blur for a field if certain conditions are met. The problem I am facing is that when I open the modal the row exits edit mode. I am using the MUI Dialog component and changing the 'open' state which I am guessing is the reason why the edit mode closes.

Does anyone know of a way to have some type of dialog/modal open during a row edit without having the row exit edit mode?

Domino987

@Domino987

Would you mind sharing a sandbox?

5 replies

Domino987

@Domino987

Most of them are if you have worked with the code for years 😉 glad this works.

RAJESHBALA

@rajeshndn007_twitter

lavan giri

@lavangiriece_twitter

I'm having this error. React version : ^17.0.2

material-table : ^2.0.3

Manish Wagale

@manishw:matrix.org

[m]

https://codesandbox.io/s/zen-bas-etl2i8?file=/src/App.js

3 replies

Please help with this.

Manish Wagale

@manishw:matrix.org

[m]

@lavangiriece_twitter: Welcome!!

fskltd

@fskltd

Hello,

Hi, May I know how to change background color after clicking the export button ? eg from black to grey as attach picture , thx

Ryan Thorburn

@ryan-thorburn

Hi, I'm trying to add a cypress tag to the export to csv button. The one that popup up when the download button is clicked that says "Export as CSV". I tried using localization -> toolbar -> exportCSVName but that seems to be a string only. I then tried components -> Toolbar -> to try to overwrite the component but that takes out the whole toolbar. I can use MTableToolbar to put it back in but I'm not sure how to overwrite the popup that has the "Export as CSV" button.

Domino987

@Domino987

Would you share your Setup in a sandbox so I can check it out?

Ryan Thorburn

@ryan-thorburn

I put this together. It's a cut down version that has just the relevant parts. I've commented out the localization section but I wanted it in there to show what I was trying. But it seems to work only if I use a string instead of a React object.
https://codesandbox.io/s/silly-breeze-9x9wuf?file=/src/App.tsx:5085-5318

Domino987

@Domino987

@ryan-thorburn screen.getByRole('menuitem', { name: /export as csv/i }) this should work for you

Yasin Aslan

@aslan50

Hi community, i have a question about searching in remote data. I am loading my data per Remote like in the example of Remote Data section and now want to search in the data i loaded. But i dont want the table do an Api Call to the Remote Server each time typing in the search field. I want to search like the data is not remote. Any idea how can i manage this or solution?

Domino987

@Domino987

You have 2 options. Using the rmote data, yes the search would it the server a few time, but there is a debounce of 300ms that you can also adjust, so after the user stops, it fires. but for fitlering in the frontend, you would need to store the data somewehre and pass it either in the data call or jsut pass the array t odata prefierlted

3 replies

Cleyson Mayrink

@cleysonmayrink

Hello, i'm having a problem, my table doesn't show horizontal scrolling. can someone help? what i can do?

Domino987

@Domino987

You need to provide more information. Can you share a Sandbox?

Cleyson Mayrink

@cleysonmayrink

@Domino987 I solved it by putting display:grid in the div above the div that has overflow-y: auto.
I noticed that the error occurs when the table is inside a container which is display: flex

one-iron

@one-iron

hello, i found material-table supports react@"^16.8.0 || ^17.0.0",
may i know any plan to update for react 18.0.0 ?

when install material-table in react 18.0.0, having this error.
try to command with --force, or --legacy-peer-deps, still having errors..

 ```
 npm ERR! code ERESOLVE
 npm ERR! ERESOLVE unable to resolve dependency tree
 npm ERR! 
 npm ERR! While resolving: ---@0.1.0
 npm ERR! Found: react@18.1.0
 npm ERR! node_modules/react
 npm ERR!   react@"^18.0.0" from the root project
 npm ERR! 
 npm ERR! Could not resolve dependency:
 npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4
 npm ERR! node_modules/@material-ui/core
 npm ERR!   @material-ui/core@"4.12.4" 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.
 npm ERR! 
 npm ERR! See /Users/lee/.npm/eresolve-report.txt for a full report.

 npm ERR! A complete log of this run can be found in:
 npm ERR!     /Users/lee/.npm/_logs/2022-04-27T05_46_23_128Z-debug-0.log

 ```

Domino987

@Domino987

mbrn abadoned the project so there is no way to update to 18 for material table. For the community fork material table core, we are waiting on a few dependencies top update tracked here: material-table-core/core#536

gokhansamet

@gokhansamet

Hello everyone, I want to scrollbar of table is going to up when after the search. I covered the material table with a div and it has a ref attr. But it is not working how can I achieve that ?

    const divRef = useRef<null | HTMLDivElement>(null);
    useEffect(() => {
        divRef!.current!.scrollTo(0, 0);
    });
    return (
        <div ref={divRef}>
            <MaterialTable

ogozman

@ogozman

Hello, is there any way to access tree nodes of the table and expand some of them programmatically? I want to make some nodes expanded by default.

Alberto Corona

@Alberto2302

Hola disculpen tenia instalado en un desarrollo a material-table pero actualice a react 18.1.0 y me dejo de funcionar lo reinstale y me sale este error

lo malo que no se que versión de react tenia cuando si me funcionaba. ayuda por favor.

Where communities thrive

People

Repo info

Activity