How to restrict sortable to be to allow only columns inside a rows and rows inside a container?
Example:
Container is having rows and columns. Both rows and columns are sortable. But how to stop row inserted inside a columns?
Working Link
$(".demo, .demo .column").sortable({
connectWith: ".column",
opacity: .35,
handle: ".drag"
});
[Solved]
I splitted the connectWith as below.
$(".demo ").sortable({
connectWith: ".demo",
opacity: .35,
handle: ".drag"
});
$(".demo .column").sortable({
connectWith: ".column",
opacity: .35,
handle: ".drag"
});
Related
I came across a situation where I need to make two or more of my custom column filters of Ag Grid React based table, to be aware of the currently applied filtering on the table.
Here is a very simple example of what I am trying to achieve:
if we have a table with columns “Athlete” and “Country”, and custom filters comprised of checkboxes representing the values available on the table, is there a way so that
If we apply a filter on the first column “Athlete”, the filter on the second column - “Country” to only show checkboxes for the filtered values currently present on the table
Plunker example
See files: index.jsx, athleteFilter.jsx, countryFilter.jsx
Column definition excerpt (see full example on Plunker above):
const columnDefs = [
{ field: 'athlete', minWidth: 150, filter: AthleteFilter },
{ field: 'country', minWidth: 150, filter: CountryFilter }
];
const rowData = [
{athlete: 'Michael Phelps', country: 'United States'},
{athlete: 'Sun Yang', country: 'China'},
{athlete: 'Inge de Bruijn', country: 'Netherlands'},
];
Does anybody have experience with configuring the autoGroupColumnDef property for AG Grid? I am simply trying to make the default Group Column for my treeData grid to only show the expand/collapse chevron (with no group text). Below is my autoGroupColumnDef config and the current visual state:
const gridOptions: GridOptions = {
treeData: true,
getDataPath: (data) => data.hierarchy as string[],
autoGroupColumnDef: {
headerName: "",
width: 30, // <-- gets completely ignored??
valueFormatter: () => "",
cellRenderer: "agGroupCellRenderer",
cellRendererParams: {
suppressCount: true,
},
},
}
As you can see, I am left with a large amount of whitespace between the chevron in the group column and the data columns despite my setting an explicit width: 30 in the config. How can I get rid of this whitespace?
Use maxWidth instead of width.
I am using the Table component available in material-ui in my React JS code with a single row. I have an "Add" icon button for adding desired number of rows. How can I expand and shrink the table height, depending on the number of rows. If the number of rows (excluding header and footer) exceed 20, then I want to put a scroll on the right. How can I handle this?
Please take a look at this solution:
https://codesandbox.io/s/basictable-material-demo-with-scroll-jsxwk?file=/demo.js.
It has a default row size of 4 that can be changed by a text field and will automatically resize the table accordingly, the scroller appears depending on the content, you don't have to worry about it.
The trick is customizing the TableContainer and Table's CSS:
const useStyles = makeStyles({
tableContainer: {
overflowY: "auto"
},
table: { //...
height: "100%",
overflowY: "scroll"
}, //...
});
And control the table container's height here:
const classes = useStyles();
const [maxRows, setMaxRows] = useState(4);
//...
return <TableContainer
component={Paper}
className={classes.tableContainer}
style={{
maxHeight: maxRows * ROW_HEIGHT + HEAD_ROW_HEIGHT
}}
>
<Table stickyHeader className={classes.table}>
{/*...*/}
</Table>
</TableContainer>
As we can see on https://www.ag-grid.com/javascript-grid-column-menu/, when the user checks/unchecks a column from the menu, the grid animates the other columns.
I'm introducing some columns dynamically, by using columnDefs:
this.columnDefs = [
{ headerName: 'Name', field: 'name', width: 200 },
{ headerName: 'S01F01', hide: this.solver !== 'solver1', field: 'age', width: 90, suppressToolPanel: true },
...
];
I've bound the hide/show flag to buttons on the UI that will bring a set of columns into the grid when needed. Although the columns show up appropriately, they simply appear instead of animating into the grid. I understand this is because I'm simply updating the columnDefs for the whole grid every time the user clicks the button.
Is there a way for me to display these columns on the click of the button while at the same time triggering the animation?
Unless you have this grid property suppressColumnMoveAnimation=true, the columns should have animation on by default.
As per docs
Column animations are on by default, row animations are off by
default. This is to keep with what is expected to be the most common
configuration as default.
How to create table with scroll overflow in Material UI v1 (v1-beta currently)? In component demos in MUI documentation there is no such example.
In all of the Table examples, there is a class applied to the div containing the Table that configures horizontal scrolling. It isn't apparent unless you're viewing the documentation with a sufficiently small viewport. (see BasicTable.js):
const styles = theme => ({
paper: {
width: '100%',
marginTop: theme.spacing.unit * 3,
overflowX: 'auto',
},
});
The paper class is applied to the root element:
function BasicTable(props) {
const classes = props.classes;
return (
<Paper className={classes.paper}>
<Table>
...
If you want a vertical scroll, you'll need to specify a height and include considerations for overflow-y. If you want both horizontal and vertical scrolling, you can set overflow and both axes will be configured:
const styles = theme => ({
paper: {
height: 300,
width: '100%',
marginTop: theme.spacing.unit * 3,
overflow: 'auto',
},
});
Note: This will not fix your column headings, because it is applied to the container. This adjustment will apply scrollbars to the entire table - heading, body, footer, etc.
In order to have the table header fixed and scroll just the table body I've come up with this solution.
First I added to each of the table components the component="div" property in order to get rid of the table skeleton completely.
Then I've added to Table, TableHead, TableBody and TableCell the display: block rule to override the material rules.
TableRows will get display: flex.
TableBody will get the desired fixed (max-)height, plus overflow: auto.
Of course by using divs instead of table tags the header and body cells lose the table alignment. In my case I solved this by setting to the first cells a fixed width, same for the first cells in the header and the first cells in body (or you can go for percentages as well) plus a flex-shrink: 0.
The second cells got flex-grow: 1
Note: Material UI v1 used
Use the "stickyHeader" property on table such as <Table stickyHeader>...</Table>