Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    anishdev89
    @anishdev89
    @Domino987 If I add
    components={{ Body: (props) => <MTableBody ref={divRef} {...props} />, }}
    And then try to get height by divRef.current.clientHeight...I am getting undefined
    Domino987
    @Domino987
    Would you mind throwing that in a sandbox and I'll take a look later
    Eban Emmanuel
    @eebbann
    hey guys how do i updated my api after using the action function in material table..since im fetching from api ..if i use crud functionality it wont have any effect cus when i refresh will come back to default, need to post updated data to server ..please help like a your teaching a 5yr old
    2 replies
    Alejandro Plaza
    @A-Plaza
    Hi everyone! I have an issue where doing a setSelectedRow (updating my component's state) inside the onRowClick refreshes the table and scrolls all the way to the top, hence user being unable to see the selected row and having to scroll back down. I have maxBodyHeight option set, so the table has scrolling on it. Has anyone experienced this before? if so, how did you guys go about it? Thanks! BTW awesome library.
    Domino987
    @Domino987
    Would you mind putting that in a sandbox. I have not seen this but I would take a look
    Alejandro Plaza
    @A-Plaza
    I was able to find the cause of the issue. Seems like for the specified scenario I mentioned, If we are overriding the Container component, it will cause that effect. I removed the override and its now working.
    sarsntony
    @sarsntony
    Has anyone tried following the material-table installation guide recently?
    I just followed it and am running into
    material-table.js:872 Uncaught TypeError: Cannot read properties of undefined (reading 'direction') at MaterialTable.renderFooter (material-table.js:872:1)
    I just copied the instruction from https://github.com/mbrn/material-table, including
    <MaterialTable
              columns={[
                { title: "Adı", field: "name" },
                { title: "Soyadı", field: "surname" },
                { title: "Doğum Yılı", field: "birthYear", type: "numeric" },
                {
                  title: "Doğum Yeri",
                  field: "birthCity",
                  lookup: { 34: "İstanbul", 63: "Şanlıurfa" },
                },
              ]}
              data={[
                {
                  name: "Mehmet",
                  surname: "Baran",
                  birthYear: 1987,
                  birthCity: 63,
                },
              ]}
              title="Demo Title"
            />
    Domino987
    @Domino987
    I think the mbrn version needs material UI < 4.4.2 or something. Try material table core for full support of material UI and Mui v5
    sarsntony
    @sarsntony
    that did it, thanks
    Eban Emmanuel
    @eebbann
    how possible is it to fetch column from api as my table header changes with time
    9 replies
    Lodnec
    @Lodnec1_twitter
    Hi All, after my data is loaded, is it possible to display the first child row automatically, without click? fyi, existing use case we have.
    Domino987
    @Domino987
    What do you mean with first child row. Detail panel? Grouping? Track the table ref and the table data object and see what gets triggered once you toggle it manually. If you provide the same out of the box, a table data object in your row object, it should be open from the beginning
    Lodnec
    @Lodnec1_twitter
    yes, detail panel of the first row. Force rendering the first child row automatically
    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
    image.png
    Lodnec
    @Lodnec1_twitter
    I think I got the event. What are the input? path = [0] ? how about render
    image.png
    Domino987
    @Domino987
    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
    image.png
    I'm having this error. React version : ^17.0.2
    material-table : ^2.0.3
    Manish Wagale
    @manishw:matrix.org
    [m]
    3 replies
    Please help with this.
    Manish Wagale
    @manishw:matrix.org
    [m]
    @lavangiriece_twitter: Welcome!!
    fskltd
    @fskltd
    Hello,
    sample.jpg
    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?