Comments (13)
So... I'm not sure if this is 'cheating' or not.. but the way that you allow arbitrary data to be passed for the localization... I just do this:
<MUIDataTable
title="foo"
data={this.props.data}
columns={this.props.columns}
options={{
filterList: this.props.filterList,
filterType: 'multiselect',
textLabels: {
body: {
noMatch: this.props.isLoading ?
<Loader /> :
'Sorry, there is no matching data to display',
},
},
}}
/>
Basically I pass in a Loader
react component (just a mui spinner) that displays in the place of the noMatch
body string until my api data comes back (and the state of which is given to the component via props.isLoading
).. this probably isn't optimal but I liked how well it worked :)
from mui-datatables.
@jkantr How do we find a happy medium? We don't want to render a table unless there is data ready because that could be a problem for one subset of users. Then this library also don't want to get into the business of having data loading spinners that should be controlled by the user.
I really think this should be handled completely outside of the library like this:
class MyTable extends React.Component {
fetchData() {
...
setState({ data, dataReady: true }) if data request finished
...
}
render() {
return (
<div>
{ (this.state.dataReady) ? (
<MUIDataTables data={this.state.data} />
) : (
<ShowSpinner />
)
}
</div>
);
}
}
from mui-datatables.
You can use a custom comp
import React from 'react';
import { MUIDataTableBody, TableBody, TableBodyCell, TableBodyRow } from 'mui-datatables';
import {
CircularProgress,
createStyles,
makeStyles,
Typography,
TableBody as MuiTableBody
} from '@material-ui/core';
interface Props extends MUIDataTableBody {
loading: boolean;
}
const useStyles = makeStyles(() =>
createStyles({
loading: {
textAlign: 'center'
}
})
);
const LoadingTableBody = ({ loading, options, columns, ...others }: Props) => {
// @ts-ignore
const visibleColCnt = columns.filter(c => c.display === 'true').length;
const classes = useStyles();
return loading ? (
<MuiTableBody>
<TableBodyRow options={options}>
<TableBodyCell
// @ts-ignore
colSpan={
options.selectableRows !== 'none' || options.expandableRows
? visibleColCnt + 1
: visibleColCnt
}
options={options}
colIndex={0}
rowIndex={0}
>
<Typography variant="body1" className={classes.loading} component={'div'}>
<CircularProgress />
</Typography>
</TableBodyCell>
</TableBodyRow>
</MuiTableBody>
) : (
<TableBody options={options} columns={columns} {...others} />
);
};
export default LoadingTableBody;
const [loading, setLoading] = useState(false);
const BodyComponent = useMemo(
() => (props: MUIDataTableBody) => (
<LoadingTableBody loading={loading} {...props} />
),
[loading]
);
return(
<MUIDataTable
title={'Title'}
data={data}
columns={columns}
options={options}
components={{ TableBody: BodyComponent }}
/>
);
from mui-datatables.
Yes, i fetch the data in componentDidMount and while the data is fetching the table displays "Sorry, no matching records found" until the data loads.(2-3sec)
from mui-datatables.
Ok, I will look into it tonight. For now, I'll probably have it not render anything until the data prop has arrived to avoid seeing that message displayed
from mui-datatables.
The above approach is a less than desirable solution as it results in the entire table disappearing when loading new data e.g. async pagination, searching, this causes massive page jank as the table disappears and reappears every time new data is loaded
from mui-datatables.
@emrbzr Huh, no kidding? What is the process in which you are loading data?
Is this an AJAX call and then once the data arrives you update the table?
from mui-datatables.
I've added this for now
https://github.com/gregnb/mui-datatables/blob/master/src/MUIDataTable.js#L657
But, @jkantr has a great suggestion as well. Adding loaders is something I don't want to get into and that should be up to the user
from mui-datatables.
Not to comment in a closed thread.. but i think this actually breaks my little hack?
https://github.com/gregnb/mui-datatables/blob/master/src/MUIDataTable.js#L693
the noMatch
text is rendered in the body... which because of your addition there, now doesn't render when there's no data :/ Am I missing something obvious?
Edit: Ah okay, no I see what's happening. the table doesn't render new data unless... the data or columns change (and initializeTable is run) so changing the options prop won't actually change what's being displayed (although a re-render does actually happen) ... i have to think about this
Edit2: okay.. so I can use the context api to fix the 'not displaying new opts data on rerender' issue.. but i can't do anything to fix your addition above... it basically kills my hack to inject a loading prop :/
from mui-datatables.
whats the solution then? is dere any other way to do so?
textLabels: { body: { noMatch : loader ? <CircularProgress size={25} color={'inherit'} /> : 'Sorry, there is no matching data to display' }, },
i tried doing this but loader doesnt show during searching, i get the 'Sorry, there is no matching data to display' when dere is no data.
from mui-datatables.
I am trying to implement an infinite scroll/lazy loader and would like to display a spinner when I am fetching additional data. Is there a way to easily achieve this?
from mui-datatables.
The above approach is a less than desirable solution as it results in the entire table disappearing when loading new data e.g. async pagination, searching, this causes massive page jank as the table disappears and reappears every time new data is loaded
This is very true. Same situation when once tries to implement lazy loader/infinite scrolling
from mui-datatables.
You can use a custom comp
import React from 'react'; import { MUIDataTableBody, TableBody, TableBodyCell, TableBodyRow } from 'mui-datatables'; import { CircularProgress, createStyles, makeStyles, Typography, TableBody as MuiTableBody } from '@material-ui/core'; interface Props extends MUIDataTableBody { loading: boolean; } const useStyles = makeStyles(() => createStyles({ loading: { textAlign: 'center' } }) ); const LoadingTableBody = ({ loading, options, columns, ...others }: Props) => { // @ts-ignore const visibleColCnt = columns.filter(c => c.display === 'true').length; const classes = useStyles(); return loading ? ( <MuiTableBody> <TableBodyRow options={options}> <TableBodyCell // @ts-ignore colSpan={ options.selectableRows !== 'none' || options.expandableRows ? visibleColCnt + 1 : visibleColCnt } options={options} colIndex={0} rowIndex={0} > <Typography variant="body1" className={classes.loading} component={'div'}> <CircularProgress /> </Typography> </TableBodyCell> </TableBodyRow> </MuiTableBody> ) : ( <TableBody options={options} columns={columns} {...others} /> ); }; export default LoadingTableBody;const [loading, setLoading] = useState(false); const BodyComponent = useMemo( () => (props: MUIDataTableBody) => ( <LoadingTableBody loading={loading} {...props} /> ), [loading] ); return( <MUIDataTable title={'Title'} data={data} columns={columns} options={options} components={{ TableBody: BodyComponent }} /> );
This solution was better, but I've made a tweak cause I've encountered an error for early return because of useMemo:
Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement
So what I did was:
Table
<MUIDataTable
...other props
components={{ TableBody: (props) =>
loading ? (
<LoadingTableBody loading={loading} {...props} />
) : (
<TableBody {...props} />
)}
/>
Then used the logic for loading code above:
const LoadingTableBody = memo(({ options, columns }: Props) => {
// @ts-ignore
const visibleColCnt = columns.filter((c) => c.display === 'true').length
return (
<MuiTableBody>
<TableBodyRow options={options}>
<TableBodyCell
// @ts-ignore
colSpan={
options.selectableRows !== 'none' || options.expandableRows
? visibleColCnt + 1
: visibleColCnt
}
options={options}
colIndex={0}
rowIndex={0}
>
<NoDataPrintContainer>
<CircularProgress />
</NoDataPrintContainer>
</TableBodyCell>
</TableBodyRow>
</MuiTableBody>
)
})
from mui-datatables.
Related Issues (20)
- how to customize the inbuilt filter function to Cascading Dropdown
- custom filter, removed chip provide wrong `filterPos` when its value is 0 HOT 1
- An option to modify delete icon?
- Pagination Rows per Page resetting itself after clicking on custom button in column HOT 6
- Column Drag not working HOT 3
- in customHeadRender only 1 column needs to sort and not remaining elements HOT 1
- Link on github front page is malicious HOT 1
- Not wroking
- muidatatable scroll bar reset
- Not able to hide expander icon from specific rows
- Why are all the examples broken? HOT 1
- Print only appeared content rows with tableBodyMaxHeight applied
- Twitching while dragging columns
- Bad typing on MUIDataTableOptions renderExpandableRow - rowData
- Responsivenes Stacked not working
- setCellProps and setCellHeaderProps not working in mobile
- Customizing the contents of a chip label
- Cant search data with children having array of objects
- how to filter an date column by month
- States are not updating in customBodyRender
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-datatables.