material-table

How can I achieve optimistic rendering with remote data using material-table?

由 不想你离开。 提交于 2020-01-30 06:43:04
问题 I am using the library material-table for data tables in my application. I was setting the data prop to use data from this.state.data and adding rows would update on my table by using setState. But after switching to remote data the table doesn't update after adding a row. Is there another way to achieve this with remote data? import React, {Component} from "react"; import MaterialTable from "material-table"; import Add from "@material-ui/icons/Add"; import Clear from "@material-ui/icons

How to use server side pagination with client filtration?

由 爷，独闯天下 提交于 2020-01-25 06:52:09
问题 what i need is when i use remote data i want to be allowed to filter client side not server side here is my table and my code for remote data <MaterialTable title={Strings.userManagementList} data={query => { this.get(query); return new Promise(resolve => event.on('data-fetched', resolve)); }} isLoading={store.loading} options={this.options} actions={this.actions} localization={this.localization} columns={this.columns} components={this.components} /> this works fine but also the search bar in

Selection and Remote Data Pagination on Material Table React

由 瘦欲@ 提交于 2020-01-25 03:52:20
问题 I need help im using material-table on react for my data table. I want to use the selection and pagination at the same time, but the problem is if i select a certain row and change the page and return to previous page. it doesn't select that row. here is a sample snippet i created. Is it possible to override the selection props? const Table = () => { const [selectedRows, setSelectedRows] = useState([]); function handleSelectChange(rows) { setSelectedRows(rows) } return ( <MaterialTable title=

React Material Table action button markup overriding for multiple actions

由 ╄→尐↘猪︶ㄣ 提交于 2020-01-23 17:45:07
问题 Action overriding feature allows me to override button but it overrides all the action buttons. For example, if I have two action buttons for edit and delete and I use the Action overriding, both of my buttons get overridden with that same custom code. How can I specify different codes for different buttons? My final goal is to conditionally disable edit and delete buttons based on the rowData. I have tried with isEditable feature as shown in the code below but it doesn't work either. ... ...

Material-Table: styling is overiding all custom and Material UI styling and icons not rendering

由 半世苍凉 提交于 2019-12-19 09:38:55
问题 I'm trying to use Material-Table component - it's perfect for a table that I'm buildling (add, edit, delete and search rows). I've installed and used it as a child component of a page - everything works but... STYLING: all custom and built-in styling in the page is lost in all the Material UI components (ie. AppBar buttons have no padding/spacing between, custom font styling is messed up). ICONS: The icons in the table won't render - they just appear as large cut-off text. Styling and icons

Material-Table: styling is overiding all custom and Material UI styling and icons not rendering

由 安稳与你 提交于 2019-12-19 09:38:26
问题 I'm trying to use Material-Table component - it's perfect for a table that I'm buildling (add, edit, delete and search rows). I've installed and used it as a child component of a page - everything works but... STYLING: all custom and built-in styling in the page is lost in all the Material UI components (ie. AppBar buttons have no padding/spacing between, custom font styling is messed up). ICONS: The icons in the table won't render - they just appear as large cut-off text. Styling and icons

React material table automatic page size

由 那年仲夏 提交于 2019-12-13 19:48:24
问题 I am using React + Material Table. Questions I have Is there a way to dynamically set pageSize based on the available space on the page? If there is no API to do so - how to better approach this problem from component design perspective? What am I trying to achieve? The number of rows displayed in a Material Table should depend on screen size. The page will not look similar depending on your screen size (e.g. on laptop device it could look fine, but on 25 inch display there will be a lot of

how to change material table action fields icon

由 那年仲夏 提交于 2019-12-11 16:00:03
问题 actions={[ { icon: 'edit', tooltip: 'Edit User', onClick: (event, rowData) => alert('You are editing ' + rowData.name) }, { icon: 'delete', tooltip: 'Delete User', onClick: (event, rowData) => confirm('You want to delete ' + rowData.name) } ]} 回答1: You can change the icon of the action by supplying arbitrary React component as the value for icon prop. icon string or () => ReactElement - Icon of button from material icons or custom component So instead of edit or delete , add a component of a

Adding component with material-table changes Material-UI AppBar style

由 爷，独闯天下 提交于 2019-12-02 07:09:26
问题 My app is using Material-UI and material-table. A global theme is applied in the "index.js" file using "ThemeProvider" with as a child and then has children: <Fragment> <CssBaseline /> <MenuAppBar /> <main className={classes.main}> <Route path="/" exact component={Home} /> <Route path="/login" component={Login}></Route> </main> </Fragment> The component then has the component with the material-table. When I add in the table component and view that page the AppBar looses some of it's styling,

Adding component with material-table changes Material-UI AppBar style

由 时光怂恿深爱的人放手 提交于 2019-12-02 00:55:54
My app is using Material-UI and material-table . A global theme is applied in the "index.js" file using "ThemeProvider" with as a child and then has children: <Fragment> <CssBaseline /> <MenuAppBar /> <main className={classes.main}> <Route path="/" exact component={Home} /> <Route path="/login" component={Login}></Route> </main> </Fragment> The component then has the component with the material-table. When I add in the table component and view that page the AppBar looses some of it's styling, e.g. background color and alignment in the dropdown buttons for Pofile and Logout ( https://material
订阅 material-table