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'},
];
Related
I know that I can use the flex attribute on a column def if I want that column to take up the remaining space of a grid, like this:
public columnDefs: ColDef[] = [
{ field: 'name', flex: 1 },
{ field: 'medals.gold', headerName: 'Gold' },
{ field: 'person.age' },
];
And I know that I can pin a column to the left (or right) so that it doesn't scroll with the rest of the columns:
public columnDefs: ColDef[] = [
{ field: 'name', pinned: 'left' },
{ field: 'medals.gold', headerName: 'Gold' },
{ field: 'person.age' },
];
But I have a case where I want the first column to both be pinned AND fill the remaining space:
public columnDefs: ColDef[] = [
{ field: 'name', flex: 1, pinned: 'left' },
{ field: 'medals.gold', headerName: 'Gold' },
{ field: 'person.age' },
];
And when I do this (pinned + flex) the grid seems to ignore the flex attribute and always renders the column with the default width. I've been through the AG-Grid docs and don't see anything that explicitly says pinning and flex columns are incompatible, but maybe I'm missing it.
Here's a plunker to play with. Try removing the pinned attribute to see the flex column work.
Has anyone been able to combine these attributes on one column?
OK, I've found a solution. I'm not sure if this is a workaround, or if this is the way you're supposed to do it, so...
It was a combination of handling the gridReady event and calling Grid API api.sizeColumnsToFit().
In my case, I also set the width and suppressSizeToFit=true for the non-pinned columns.
Updated plunker.
I'm using ag-grid (vanilla javascript) and would like to be able have the user click on the filter box (as well as the filter icon) to display the filter options.
Currently it is read only and can only be accessed by clicking the filter icon.
I cannot find any information in the documentation to allow this to happen and cannot think of a way to achieve this.
I've created a Plunker example which you can see here:
https://plnkr.co/edit/XQP8FFzSaaknRSMh2zdN?p=preview
var columnDefs = [{
headerName: 'Athlete',
field: 'athlete',
width: 150,
filter: 'agSetColumnFilter',
filterParams: {
cellHeight: 20,
values: irishAthletes(),
debounceMs: 1000
}
}, {
headerName: 'Country',
field: 'country',
width: 140,
cellRenderer: 'countryCellRenderer',
keyCreator: countryKeyCreator,
filter: 'agSetColumnFilter',
filterParams: {
selectAllOnMiniFilter: true
}
},
];
I would like a user to be able to click on the filter box (e.g. the box below 'Athlete') in the headers to display the relevant filter options. As if they have clicked on the filter icons.
Any suggestions would be appreciated.
Please refer to the image shown below. (The highlighted part is the ROW header that I need in AG-Grid)
I am not sure about the functional use case of this first column for you.
Nevertheless you can achieve this by adding it to column definition as shown below.
var gridOptions = {
// define grid columns
columnDefs: [
// using default ColDef
{
headerName: ' ',
field: '__',
width: 15,
sortable: false,
cellStyle: {
// you can use either came case or dashes, the grid converts to whats needed
backgroundColor: 'lightgrey', // whatever cell color you want
},
},
...
}
Created working sample plnkr here.
As far as I know ag-grid doesn't have any built-in support for row headers, but as a workaround you can make your first column appear as row headers. I recommend making the whole column look a little different compared to the other columns (including the column header if it's not blank) so it can clearly be seen they are column headers, not standard row data.
Example column definitions:
ColumnDefs: [
{ headerName: 'Column Title 1', field: 'Column1', minWidth: 100, headerClass: "upperLeftCell", cellStyle: {
backgroundColor: 'AliceBlue', //make light blue
fontWeight: 'bold' //and bold
}
},
{ headerName: 'Column Title 2', field: 'Column2', minWidth: 100 },
{ headerName: 'Column Title 3', field: 'Column3', minWidth: 100 }
]
You can also style in SCSS as shown here with the upper left cell:
::ng-deep .ag-header-cell.upperLeftCell {
background-color: aliceblue;
font-weight: bold;
}
In your data rows: you have to enter in the first column the title you want for each row.
Add this as your first colDef. It will render a index column that is unmovable. I have a separate IndexColumnCellRender so won't look exact the same, fill in cellStyle to fit your needs, or make a dedicated cell render like me.
const rowIndexColumn: ColDef = {
valueGetter: ({ node }) => {
const rowIndex = node?.rowIndex;
return rowIndex == null ? "" : rowIndex + 1;
},
width: columnWidth,
headerName: "",
colId: "some-id",
field: "some-id",
suppressNavigable: true,
suppressPaste: true,
suppressMovable: true,
suppressAutoSize: true,
suppressMenu: true,
lockPosition: true,
cellStyle: { padding: 0 },
};
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.
We'd like to use React Data Grid from Adazzle (as mentioned in the tag with this question) now that we're using React (16.xx) and the older jsGrid is less appealing.
Two questions:
Our old jsGrid had a data type to include in the grid called Checkbox. This was immensely helpful. I haven't found a similar type in the React Grid. Have I just missed it or is it not a part of the library?
In each row, in some columns, we'd like to actually have two rows of data inside the column -- i.e., two lines of text separated by carriage return. But the react-data-grid demos only seem to show one line per column. Is this a limitation, or can we use CSS in the values inside columns?
Is there search included for the rows shown in the table at any given point in time?
I will provide answer to your question part by part
1) In react-data-grid column you can include a checkbox by using the formatter
attribute that is specified while the columns are defined.
Consider the following example
let columns = [
{
key: 'name',
name: 'Name',
resizable: true,
width: 100
},
{
key: 'checkbox',
name: 'CheckBox',
formatter:checkBoxFormatter,
resizable: true,
width: 100
}
]
class checkBoxFormatter extends React.Component {
render() {
return (
<div>
<CheckBox></Checkbox> //Provide your checkbox code here
</div>
)
}
}
2)You can exapand the rows for that you need to use getSubRowDetails and onCellExpand attributes of ReactDataGrid component .For example refer this documentation
3)Search is available for filtering .For example refer this documentation