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
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 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
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?
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?
<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>
)
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" />}
/>
),
