Comments (8)
Thanks for your suggestion. Let me think about this some more and get back to you
from mui-datatables.
So what I'm thinking is providing a property on options called customToolbarSelect
which will look like so:
import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "../../src/";
import CustomToolbarSelect from "./CustomToolbarSelect";
class Example extends React.Component {
render() {
const columns = ["Name", "Title", "Location", "Age", "Salary"];
const data = [
["Gabby George", "Business Analyst", "Minneapolis", 30, 100000],
["Aiden Lloyd", "Business Consultant", "Dallas", 55, 200000],
["Jaden Collins", "Attorney", "Santa Ana", 27, 500000],
["Franky Rees", "Business Analyst", "St. Petersburg", 22, 50000],
["Aaren Rose", "Business Consultant", "Toledo", 28, 75000],
["Blake Duncan", "Business Management Analyst", "San Diego", 65, 94000],
["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, 210000],
["Lane Wilson", "Commercial Specialist", "Omaha", 19, 65000],
["Robin Duncan", "Business Analyst", "Los Angeles", 20, 77000],
["Mel Brooks", "Business Consultant", "Oklahoma City", 37, 135000],
["Harper White", "Attorney", "Pittsburgh", 52, 420000],
["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, 150000],
["Frankie Long", "Industrial Analyst", "Austin", 31, 170000],
["Brynn Robbins", "Business Analyst", "Norfolk", 22, 90000],
["Justice Mann", "Business Consultant", "Chicago", 24, 133000],
["Addison Navarro", "Business Management Analyst", "New York", 50, 295000],
["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, 200000],
["Eli Mejia", "Commercial Specialist", "Long Beach", 65, 400000],
["Gene Leblanc", "Industrial Analyst", "Hartford", 34, 110000],
["Danny Leon", "Computer Scientist", "Newark", 60, 220000],
["Lane Lee", "Corporate Counselor", "Cincinnati", 52, 180000],
["Jesse Hall", "Business Analyst", "Baltimore", 44, 99000],
["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, 90000],
["Terry Macdonald", "Commercial Specialist", "Miami", 39, 140000],
["Justice Mccarthy", "Attorney", "Tucson", 26, 330000],
["Silver Carey", "Computer Scientist", "Memphis", 47, 250000],
["Franky Miles", "Industrial Analyst", "Buffalo", 49, 190000],
["Glen Nixon", "Corporate Counselor", "Arlington", 44, 80000],
["Gabby Strickland", "Business Process Consultant", "Scottsdale", 26, 45000],
["Mason Ray", "Computer Scientist", "San Francisco", 39, 142000]
];
const options = {
filter: true,
selectableRows: true,
filterType: 'dropdown',
responsive: 'stacked',
rowsPerPage: 10,
customToolbarSelect: (selectedRows) => <CustomToolbarSelect selectedRows={selectedRows} />
};
return (
<MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
);
}
}
ReactDOM.render(<Example />, document.getElementById("app-root"));
That would allow a user to override and provide in their own toolbar for selected rows. An example could look like this:
import React from "react";
import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";
import DeleteIcon from "@material-ui/icons/Delete";
import FilterIcon from "@material-ui/icons/FilterList";
import { withStyles } from "@material-ui/core/styles";
const defaultToolbarSelectStyles = {
iconButton: {
marginRight: "24px",
top: "50%",
display: "inline-block",
position: "relative",
transform: "translateY(-50%)",
},
deleteIcon: {
color: "#000",
},
};
class CustomToolbarSelect extends React.Component {
handleClick = () => {
console.log("click!", this.props.selectedRows); // a user can do something with these selectedRow values
}
render() {
const { classes } = this.props;
return (
<div className={"custom-toolbar-select"}>
<Tooltip title={"icon 2"}>
<IconButton className={classes.iconButton} onClick={this.handleClick}>
<FilterIcon className={classes.deleteIcon} />
</IconButton>
</Tooltip>
<Tooltip title={"icon 1"}>
<IconButton className={classes.iconButton} onClick={this.handleClick}>
<DeleteIcon className={classes.deleteIcon} />
</IconButton>
</Tooltip>
</div>
);
}
}
export default withStyles(defaultToolbarSelectStyles, { name: "CustomToolbarSelect" })(CustomToolbarSelect);
from mui-datatables.
This is great. Thank you for looking into this. Just curious, will this work on the mobile stacked version?
Thanks!!
from mui-datatables.
Ok, download the latest version and in the examples folder I have an example of a custom toolbar for select
from mui-datatables.
This looks great. Thank you for getting this done!
Is there a way to select a row and pop the custom toolbar for the mobile stacked version?
Thanks,
Ray
from mui-datatables.
Not meaning to want to re-open this, but I feel I need some clarification. Say I have a column that is a reference number, and I want to display that in the customToolbarSelect component, so I would click a bunch of rows and it would display the reference numbers, rather than just say 3 rows selected.
I couldn't find any info about this.
from mui-datatables.
One issue I see here is a user cannot manually delete rows. Is that currently the case?
from mui-datatables.
is there a way to override the default 'hint' icon? in the docs (linked here) there is a 'hint' field in the options section to have tooltips in the header. when active, it displays a '?' icon by default, but i'm trying to figure out how to change it with a different icon. anyone got any advice?
from mui-datatables.
Related Issues (20)
- 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
- [discuss] I need filter in table theader
- SearchBox vanished on pressing Escape even with `searchAlwaysOpen: true`
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.