I'm using ag-grid (angular) and I would like to export the select rows to CSV or Excel. From what i researched on documentation this feature seems to be possible only using an external button (yellow on image) and not from the export inside of the table (red underline in image).
Is this possible to export selected line through the table itself (red underline in image)?
I'm imagining a multi selection feature in table and if I've no elements selected so the ag-grid export all data and if i've some elements selected then the ag-grid only export the selected one.
This is possible and can be achieved defining your custom function under context menu:
indicate that you will customise your Context Menu:
var gridOptions = {
columnDefs: columnDefs,
getContextMenuItems: getContextMenuItems,
rowSelection: 'multiple',
...
};
define your action exportDataAsExcel and pass onlySelected: true param to reduce export lines:
function getContextMenuItems(params) {
var result = [
{
name: "Excel Export (.xlsx)",
action: () => params.api.exportDataAsExcel(
{onlySelected: true}
)
},
];
return result;
}
you don't need to remove all the menu elements as I did - more about Context Menu can be found in official ag-grid documentation
https://www.ag-grid.com/javascript-grid-context-menu/
You can also just change the default behavior by using the defaultCsvExportParams property. (https://www.ag-grid.com/javascript-data-grid/csv-export/#grid-properties)
var gridOptions = {
...
defaultCsvExportParams: {
onlySelected: true
},
...
};
They have a similar option for the Excel export (https://www.ag-grid.com/javascript-data-grid/excel-export-api/#excelexportparams)
Related
The requirement is to have 'inline editing' of some cell in Tabulator based table.
The cell requires a custom editor since the input is a custom component (which is already used in another form, outside of Tabulator).
Our environment is React + Tabulator (v4.7) + BlueprintJS as the components library.
The problem is that the component won't fully open as a custom editor in Tabulator, while working fine outside of Tabulator, in a regular form.
Why the component won't fully open?
The custom component serving as the 'editor' for this cell is using Blueprint (BP) 'popover' so it has a popover target and a content. This is how it looks like in a form edit:
The problem is that upon clicking, the popover target is being rendered but the popover content is not, so the custom 'dropdown' input component is never appearing:
Relevant code sections
Tabulator column definition:
{
title: "Some Col Title",
field: "someField",
formatter: someFieldFormatter,
editor: "someFieldEditor" as Tabulator.Editor,
editorParams: (cell) => {
return { cell, zones: zonesDataTree };
},
},
Defining custom cell editor:
Tabulator.prototype.extendModule("edit", "editors", {
someFieldEditor: (
cell: CellComponent,
onRendered: Function,
success: Function,
cancel: Function,
editorParams: SomeFieldCellEditorParams
): Element => {
const elem = document.createElement("div");
// SomeFieldCellEditor is a React component that wraps around the same component used in
// the "regular form" scenario mentioned in the screenshot
const someFieldCellEditorComponent: any = React.createElement(SomeFieldCellEditor, {
theData: editorParams.data,
});
ReactDOM.render(someFieldCellEditorComponent, elem);
return elem;
},
});
This is happening because the element is contained inside of the cell.
To prevent corruption of the table layout, tabulator cells have overflow:hidden defined on their CSS.
Most dropdown libraries have a an option that lets you set where in the DOM the list should be appended. You can use this potion to append the list to the body tag which should resolve the issue.
On a side note, did you know that Tabulator comes with built in Select and AutoComplete Editors
I am using material-Table plugin for my reactJS application to display table of data.
I have requirement to show the filtering on column. But when I enabled filtering=true then it creates one more row on Header section below the heading. Which takes unnecessary space and its shown always.
I want to hide the filter section. Maybe I show the filter icon next to column and when clicked it show the filtering text line. I saw this option is on tubular-react tables. But can I do in with material-table?
Its not supported out of the box, but if you save the filtering state in a useState and set that to true update the table, like this:
function Table(){
const [filtering, setFiltering] = React.useState(false);
retrun <div>
<MaterialTable options={{filtering}}/>
<button onClick={() => {setFiltering(currentFilter => !currentFilter)}}>Show Filtering</button>
</div>
}
So the solution came out like below. (I am using class)
In Material-table, need to add a button for filter. which will toggle the filter section.
Also add the options={{Filtering: this.state.filter}}. We also need to define a small function to toggle the flag.
options={{Filtering: this.state.filter}
actions={[
{
icon: 'filter',
tooltip: 'Enable Filter',
isFreeAction: true,
onClick: (event) => { this.functionName(!this.state.filter)}
}
]}
I am using react-table for as a data grid for an application . I have this scenario where I need to show/hide columns that are listed and based on user selection I need to show/hide them . Is there any way I can achieve this?
Basically need to have a some settings kind of icon , on click of the same I need to display all the available columns and based on the checkbox selection I need to show/hide them.
How can I get all the column values from react-table to show in this dropdown?
How can I add this settings icon as a part of column header(I will be displaying id's under this column), But the header for this column would be a settings icon next to "Edit" label
import * as React from 'react';
import ReactTable from 'react-table';
import 'react-table/react-table.css';
export default class App extends React.Component<{},{}>
constructor(props:any){
super(props);
this.state={
data : [];
}
componentDidMount() {
//using some fetch Call, I get the data and set it to state data property
let data = fetch(); // fetch call which is not described here
this.setState({data})
}
render(){
<ReactTable
data={this.state.data}
columns = {[
{
Header: "Edit",// here i need to add an settings icon next to "Edit" header and on click of the same need to show all the column names, then show/hide them based on selection
id: "row",
Cell: (row:any) => {
return <span>{row.index+1}</span>;
}
},
{
id: 'name,
Header: 'Name',
accessor: 'username',
},
{
id: 'dob,
Header: 'DOB',
accessor: 'userDOB',
},
{
id: 'status',
Header: 'Status',
accessor: 'userStatus',
}
]}
/>
}
}
The first issue I see is you are planning to store all column names in a Row 'Edit' -but the function
'(row:any) => { return {row.index+1}; }' is will iterate over data object - not columns object. That means, if data rows more then columns you are unnecessarily going over all the data rows.
Instead, store columns object state in React State. Update 'show' property of the columns to hide/show columns.
Something like this code here --
https://eim52.codesandbox.io/
This is a super low tech solution that I figured out, and not doing things dynamically, but perhaps this can help you achieve your goal:
To hide a column in a static way do the following:
1) Give the column a value of hidden, which will hide the column but not the column header.
2) Give the column an empty name or else you will see text in the header.
3) Give the column a width of -1. A width of 0 leaves a small empty header column, but -1 'hides' it apparently. Not sure why it works, im not a css master, but it works.
const columnTemplate = [
{
{
key: "costCenter",
name: "",
width: -1,
hidden: true
}
}
];
as you notice below, I'm using Ext.Array.merge to render columns within initComponent.
I'm try to set columns' flex property as default in initComponent.
How can I achieve to this arrangement?
initComponent: function () {
var me = this;
Ext.on('resize', function () { me.height = window.innerHeight - App.MAIN_FOOTER_HEIGHT - App.MAIN_HEADER_HEIGHT - 100 });
me.createGridMenu();
me.columns = Ext.Array.merge(me.getListColsStart(), me.getListCols(), me.getListColsEnd());
//I need to set through here. Any solution such as setDefaults or dot notation to fetch defaults of columns?
me.callParent(arguments);
},
and here is one of overrided functions
getListCols: function () {
return [];
},
UPDATE:
Related second question moved to Setting defaults to panel items for nested objects post. FYI.
Here is an excerpt from the API Docs, from the columns documentation (it also contains an example related to your question):
This can also be a configuration object for a
Ext.grid.header.Container which may override certain default
configurations if necessary. For example, the special layout may be
overridden to use a simpler layout, or one can set default values
shared by all columns:
So, in your case, here is how you can setup flex as a default config for all columns:
me.columns = {
items: Ext.Array.merge(
me.getListColsStart(),
me.getListCols(),
me.getListColsEnd()
),
defaults: {
flex: 1
}
}
EDIT
If the flex property must be applied only to a subset of columns, one way to achieve this is by applying the array map function on the needed subset:
me.columns = Ext.Array.merge(
me.getListColsStart(),
Ext.Array.map(me.getListCols(), function(listColConfig) {
listColConfig.flex = 1;
return listColConfig;
}),
me.getListColsEnd()
)
I am using Data-Grid for listing of my grid data. However, I have to say maximum item per page from the grid. I have gone through the Data-Grid library function and changed the parameters from there to select the customize / selact my default value. But, I am failed. It's appearing here in some way
Here the problem is it's not selecting the default page size when loading. So I have done so to select the default page size in this way
$scope.gridOptions = {
data: [],
getData: gridListService.getOrdersDataItemcategory,
sort: {
predicate: 'Name',
direction: 'asc'
},
itemsPerPage:5,
};
However it's still not working. But, once, when I select any item from the dropdown like 5/10 then the pagination appears and obey by the the item per pages this way.
So, now, my question is how can I start from this way which will select a default pagesize rather than coming with a empty value with all items. Thank you.
Ohh, I got the solution by myself. I have added the default itemsPerPage in the wrong way. it will be this way.
$scope.gridOptions = {
data: [],
getData: gridListService.getOrdersDataItemcategory,
sort: {
predicate: 'Name',
direction: 'asc'
},
pagination: {
itemsPerPage: '10'
}
};
Here the pagination support is coming from the another angular module as there are 2 js file(datagrid, and pagination). Source file