Comments (3)
It looks like there's a bug. I will look into this today
from mui-datatables.
This issue should be resolved. Upgrade to version 2.0.0-beta-3
from mui-datatables.
Hi Greg,
First of all, thx for this library, saves me tons of work. I'm a newbee to javascript so there could be a very simple explanation to this,, but i am experiencing this very same issue on version 2.0.0-beta-37. My code:
''''js
import * as React from 'react';
import MUIDataTable from "mui-datatables";
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
export class ClientList extends React.Component {
state = {
page: 0,
count: 100,
rowsPerPage: 10,
data: []
};
getMuiTheme = () => createMuiTheme({
overrides: {
MuiMenuItem: {
root: {
fontSize: '1.25rem'
}
}
, MuiChip: {
label: {
fontSize: '1.25rem'
}
}
, MuiInputLabel: {
root: {
fontSize: '1.5rem'
}
}
, MuiTooltip: {
tooltip: {
fontSize: '1.25rem'
}
}
, MuiInputBase: {
input: {
fontSize: '1.25rem'
}
}
, MuiSelect: {
selectMenu: {
fontSize: '1.25rem'
}
}
, MuiTypography: {
h6: {
fontSize: '2rem'
}
, caption: {
fontSize: '1.25rem'
}
}
, MUIDataTableHeadCell: {
root: {
fontSize: '1.25rem'
, fontWeight: 'bold'
}
}
, MUIDataTableBodyCell: {
root: {
fontSize: '1.25rem'
//,backgroundColor: "#FF0000"
}
}
}
})
componentDidMount() {
this.getClientListWrapper(0,10);
}
onChangeRowsPerPage = rowsPerPage => {
this.setState({ rowsPerPage });
};
// get data
//getData = () => {
// this.getClientList().then(data => {
// this.setState({ data });
// });
//}
//get list of clients
getClientList = () => {
return new Promise((resolve, reject) => {
fetch('api/Client/Index')
.then(function (response) { return resolve(response.json()); })
//.then(function (myJson) { console.log(JSON.stringify(myJson)); })
;
});
}
//route to client overview page
showClientOverview = (id) => {
this.props.history.push("/client/edit/" + id);
};
getClientListWrapper = (page, rowsPerPage) => {
this.getClientList().then(data => {
this.setState({
page: page,
rowsPerPage: rowsPerPage,
data
});
});
};
render() {
const columns = [{ name: "Id", options: { display: false } }, "Clientnummer", "Naam", "Airline"];
const { data, page } = this.state;
const data1 = data.map(item => { return [item.clientId, item.clientNumber, item.fullName, item.companyName] });
const options = {
filter: true
,filterType: 'dropdown'
,responsive: 'stacked'
,serverSide: false
,count: data1.length
,page: page
,rowsPerPage: this.state.rowsPerPage
,rowsPerPageOptions: [10, 15, 50, 100]
,onChangeRowsPerpage: this.onChangeRowsPerPage
,onRowClick: (rowData, rowMeta) => {
this.showClientOverview(rowData[0])
}
,onTableChange: (action, tableState) => {
//console.log(action, tableState);
// a developer could react to change on an action basis or
// examine the state as a whole and do whatever they want
switch (action) {
case 'changePage':
this.getClientListWrapper(tableState.page, tableState.rowsPerPage);
break;
}
}
//TODO: load labels from label table
,textLabels: {
body: {
noMatch: "Clienten laden...",
toolTip: "Sorteren",
}
, pagination: {
next: "Volgende Pagina",
previous: "Vorige Pagina",
rowsPerPage: "Aantal objecten per pagina:",
displayRows: "van",
}
, toolbar: {
search: "Zoek",
downloadCsv: "Download CSV",
print: "Print",
viewColumns: "Filter Kolommen",
filterTable: "Filter Tabel",
}
, filter: {
all: "Alles",
title: "Filters",
reset: "Verwijder Filters",
}
, viewColumns: {
title: "Toon Kolommen",
titleAria: "Toon/Verberg Kolommen",
}
, selectedRows: {
text: "geselecteerde rij(en)",
delete: "Verwijder",
deleteAria: "Verwijder Geselecteerde Rijen",
}
}
};
return (
<MuiThemeProvider theme={this.getMuiTheme()}>
<MUIDataTable title={"Team Vervoort - Clienten"} data={data1} columns={columns} options={options} />
</MuiThemeProvider>
);
}
}
''''
I have 21 clients in my database. When navigating to last page (2) there is one last client on that page. If i change rowsPerPage to 15 then, the page goes blank. Refreshing it defaults to first page, rowsPerPage = 10. However: changing rowsPerPage to 50 or 100 works perfectly. Any ideas?
from mui-datatables.
Related Issues (20)
- Vertical scroll bar on records ONLY?
- customize selectToolbar ( add other actions instead of just the default delete action)?
- 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
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.