Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    wangyfax
    @wangyfax
    image.png
    Domino987
    @Domino987
    Did you read the link I posted
    That explains how you can do it
    Mohammed Saber
    @MohammedSaberMohammed
    @Domino987
    could u please support here ? about initialPage property broken for remote data
    https://stackoverflow.com/questions/65791747/how-to-use-initialpage-with-remote-data-mbrn-material-table
    Francesco Venica
    @francescovenica

    hello, is there a way to extend columnprop types? I'm adding few types to the table (live autocomplete/color picker) but typescript throw an error:
    index.js:1 Warning: Failed prop type: Invalid prop 'columns[2].type' of value 'color' supplied to 'MaterialTable',

    everything is working fine and building in prod does not show the error, but would be better to fix it somehow

    Domino987
    @Domino987
    @francescovenica can you create a Sandbox to show is your code
    Rookie
    @jagadeeshkoka
    Hi
    image.png
    Is there way where i could display pagination numbers in this format ?
    Rookie
    @jagadeeshkoka
    I used "stepped"
    but that displays only few numbers.
    I want to display atleast 5 numbers if it has data.
    mohankiran
    @mohankiran
    Hi I just need some suggestion how to test detailPanel using react testing library. I have been passing the props which is required for Material table but still detail panel is not getting covered in coverage reportt
    Francesco Venica
    @francescovenica

    @Domino987 this is a pseudo code I did:
    https://codesandbox.io/s/eloquent-breeze-3og4w?file=/src/App.js

    I didn't create the custom components too but you should be able to understand the logic, I'm passing everything in the column object, in the components prop I overwrite the EditField and Cell in order to handle different data type

    Domino987
    @Domino987
    I see. You can just use the as prop to force ts to accept it. [] as Column[]
    Francesco Venica
    @francescovenica
    I still get the error because "Column" accept only type = ["string","boolean","numeric","date","datetime","time","currency"]
    Domino987
    @Domino987
    try as any as ...
    WegDamit
    @WegDamit
    Hi, i tried defaultSort on a column (in 1.68.2 and 1.69.2) and after doing so i can not change the sort column in the table by clicking the column header, it always switches back to the default column? Why...?
    Domino987
    @Domino987
    That's a known bug. Please migrate to material-table/core since mbrn is absent. This should be fixed in this version
    Soquar
    @Soquar
    Hey, is there a way to set the options conditionnally? So for example, depending on the screensize i want to activate the pagination or not. Is there a way for this?
    Domino987
    @Domino987
    Sure, there is a use Width hook from material ui and you can just instead of setting it to true set it in condition to this hook value
    Soquar
    @Soquar
    Thank you
    mikahpinegar
    @mikahpinegar

    hi everyone!

    I have a MaterialTable with more entries than will fit on the page. I want to list them all and be scrollable, and this is working. The issue is that the table is contained within a div that is also scrollable thus creating two scroll bars. I have tried putting it inside a div that has "overflow: 'hidden'" but this has not fixed the issue. Is there some property for MaterialTable that would override it's parent div and create a second scroll bar? Can anyone think of a possible workaround?

    huda23aduh
    @huda23aduh
    hi, need help.
    can you give the way how to adjust font size input if filter materialtable ?
    thanks in advance
    MartaGolabek
    @MartaGolabek

    Hi everyone!

    I am using columnResizable feature, but I would like to have more control over the column widths. First of all, I would like to set width of each column to max width on the first render (initial values), then on each resize event, I would like to set/persist the new widths. Is this currently possible?

    varunvijay91
    @varunvijay91
    Hi All,
    Is there a way to put pagination on left hand side ? I saw there is an option to put at top or bottom or both , but didn't see how to override the property to put to left hand side
    cursedmagician
    @cursedmagician
    Hi Eveyone,
    Is there a trick to installing material-table from a github branch, if I install 16.9.2 using basic npm install material-table then no issues. if I install using npm install git+https://github.com/cursedmagician/material-table.git while it is in node_modules, the application indicates it cannot be found.
    Sorry if this is a stupid question :-/
    cursedmagician
    @cursedmagician
    Just thought before I rebuild eveything again I would ask the dumb question .. 😝
    cursedmagician
    @cursedmagician
    yeah ... ok, being dumb, there is no dist in the git .. lol
    gatz
    @Gatz28Ing_twitter
    Hi, I'm new on java script and I'm trying to create a table I could get the data rendered in my table but now I do not know how to get the selected data, I tried using onSelectionChange but it does not work and then I tried to shown an alert but it is not working why my code does not shows any alert message?
    return (
    <Query query={GET_TESTERS_QUERY} >
    {({ data, loading, error }) => {
    if (loading) return <div>Loading</div>
    if (error) return <div>Error</div>
    return (
    <DataTable table_title={'TESTERS'} column={columns} data={ data.tester.map((tester) => {
    return {
    tester: tester.testerId,
    name:tester.name,
    skills:tester.skills,
    email:tester.email,
    geo:tester.geoId.geo
    }
    }
    )
    }
    options={{
    filtering: true,
    selection: true
    }}
    actions={[
    {
    icon: 'save',
    tooltip: 'Save User',
    onClick: (event, rowData) => alert("You saved " + rowData.name),
    }
    ]}
    //onSelectionChange={(rows) => alert('You selected ' + rows.length + ' rows')}
    />
    )
    }}
    </Query>
    )
    Prem Kumar G
    @Prem-Kumar-G
    how to disable past dates for date type field when editing?
    Domino987
    @Domino987
    @Prem-Kumar-G you need to override the edit component prop of the column and Redner the date picker yourself
    Naim Bouallagui
    @naimbouallagui
    @Domino987, @all hope you are doing well, how can i change the editable input from a simple text type into textarea ?
    Domino987
    @Domino987
    @naimbouallagui SUre, you just need to override the editComponentProp from the column
    Matt Brody
    @mattlbrody
    Does anyone know how I can convert a decimal 'numeric' value in a cell into a percentage?
    I can do it by manipulating the data before passing it into the table, but i figured there must be a way to do it it inside of the MaterialTable component.
    Domino987
    @Domino987
    @mattlbrody override the render method of that column and return a string with the adjusted value and s percentage sign
    Matt Brody
    @mattlbrody
    @Domino987 Thanks, I was able to solve it like this, render: rowData => <span>{Math.round(rowData.GM_pct * 100)}%</span>,

    I ran into another weird issue where editComponent doesn't do anything, I'm trying to make it so the material-ui Autocomplete component works in the filter, but no matter what I put in editComponent, nothing happens at all.

    editComponent: props => (
    <Autocomplete id="combo-box-demo" options={arr} getOptionLabel={(option) => option.title}
    style={{ width: 300 }}
    renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
    />
    ),

    Domino987
    @Domino987
    Can you put that in a sandbox?
    RodolfoHill
    @RodolfoHill
    render
    Matt Brody
    @mattlbrody
    I'm getting an error on line 4 about importing that I'm not getting in my actual code.
    Soquar
    @Soquar
    Does Material Table support longpress, which also selects the row?
    Domino987
    @Domino987
    @mattlbrody put the autocomplete into the filterComponent of the column. That should work.
    @Soquar you need to override the row component and add a custom long click handler to them