Giter Site home page Giter Site logo

ag-grid-enterprise's Introduction

AG Grid HTML5 Grid trusted by the community, built for enterprise

CDNJS Github Stars Twitter

Module Info
ag-grid-community npm
Quality Gate Status
ag-grid-enterprise npm
Quality Gate Status

AG Grid

AG Grid is a fully-featured and highly customizable JavaScript data grid. It delivers outstanding performance, has no third-party dependencies and integrates smoothly with all major JavaScript frameworks.

Here's how our grid looks with multiple filters and grouping enabled:

Image of AG Grid showing filtering and grouping enabled.

Features

In addition to the standard set of features you'd expect from any grid:

  • Column Interactions (resize, reorder, and pin columns)
  • Pagination
  • Sorting
  • Row Selection

Here are some of the features that make AG Grid stand out:

  • Grouping / Aggregation *
  • Accessibility support
  • Custom Filtering
  • In-place Cell Editing
  • Records Lazy Loading *
  • Server-Side Records Operations *
  • Live Stream Updates
  • Hierarchical Data Support & Tree View *
  • Customizable Appearance
  • Customizable Cell Contents
  • State Persistence
  • Keyboard Navigation
  • Data Export to CSV
  • Data Export to Excel *
  • Excel-like Pivoting *
  • Row Reordering
  • Copy / Paste
  • Column Spanning
  • Pinned Rows
  • Full Width Rows
  • Integrated Charting
  • Sparklines

* The features marked with an asterisk are available in the Enterprise version only.

Check out the developer documentation for a complete list of features or visit our official docs for tutorials and feature demos.

Looking for a framework specific solution?

Getting started

Install dependencies

$ npm install --save ag-grid-community

Add a placeholder to HTML

<div id="myGrid" style="height: 150px; width: 600px" class="ag-theme-quartz"></div>

Import the grid and styles

import { createGrid } from 'ag-grid-community';

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

Set configuration

const gridOptions = {
	columnDefs: [
		{ headerName: 'Make', field: 'make' },
		{ headerName: 'Model', field: 'model' },
		{ headerName: 'Price', field: 'price' }
	],
	rowData: [
		{ make: 'Toyota', model: 'Celica', price: 35000 },
		{ make: 'Ford', model: 'Mondeo', price: 32000 },
		{ make: 'Porsche', model: 'Boxster', price: 72000 }
	]
};

Initialise the grid

const eGridDiv = document.querySelector('#myGrid');
const api = createGrid(eGridDiv, gridOptions);

For more information on how to integrate the grid into your project see Building AG Grid Applications.

Issue Reporting

If you have found a bug, please report it in this repository's issues section. If you're using the Enterprise version, please use the private ticketing system to do that.

Asking Questions

Look for similar problems on StackOverflow using the ag-grid tag. If nothing seems related, post a new message there. Please do not use GitHub issues to ask questions.

Contributing

AG Grid is developed by a team of co-located developers in London. If you want to join the team send your application to [email protected].

License

This project is licensed under the MIT license. See the LICENSE file for more info.

ag-grid-enterprise's People

Contributors

akoslukacs avatar ceolter avatar dimitropoulos avatar kaitlynreese avatar makinggoodsoftware avatar petyosi avatar rmc-software avatar seanlandsman avatar

Stargazers

avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

software-engineering24 markphsd

ag-grid-enterprise's Issues

5.0.0-alpha bug

Throwing in console:

Uncaught TypeError: Cannot read property 'getActualWidth' of undefined
in method MoveColumnController.prototype.getNewIndexForColMovingRight

Not changing the experience or anything, just spamming console

Menu icon override doesnt work

If I provide an icon for "menu" under gridOptions.icons, the icon does show up correctly on hover over the column header. But when you click it and menu opens, the open menu shows the old icon.

filter set issues

we enable filter sets. One thing is the user will use the search textbox to filter the options, but the select all seems to only mean select all for everything even though the user has used the textbox to filter down the list of options.

[filter group] Selecting a group ignores the quickFilterText

Hi, I don't know if it is the proper behavior, but when you select a group with groupSelectsChildren = true, it ignores the quickFilterText.

So if I have a group with 30 rows, but I filter it and it shows only 6 of them, and then I click on the checkbox to select the group, it selects all of them instead of selecting only the ones that it shows.

It looks strange, particularly because the group rows are showing in parenthesis the number of items which they have, which is updated (it is "6")

selection problem wit grouopd

Empty Context Menu

If I have a grid with a few rows, plenty of empty space and right click in the empty space, it tries to open a context menu. A couple issues:

  1. Should it even create a context menu when there's no row or column beneath?
  2. If the develop returns an empty array of menu items, can the menu just not be displayed?

Question about grouping rows

Hi @ceolter. I'm doing some POCs and wondering if the following is possible out of the box/via custom renderer a custom renderer that is not hacky.

I need to be able to group by n number of columns. I can use the row grouping functionality from ag-grid-enterprise, https://www.ag-grid.com/javascript-grid-grouping, e.g.

+ col 1
|
+---- col 2
           | 
           +---- col 3
                        |
                        +---- col 4
                                      | ____ row (col1 data, col 2 data, col 3 data ...)

                                      |
                                      +------row (col1 data, col 2 data, col 3 data ...)
                                      ...

but the scenario I need is to have it group by these 4 columns and only have one collapsible row for the grouping, e.g.

+ Header row for col1 col2 col3 col 4
|____ row (col1 data, col 2 data, col 3 data ...)
|
+------row (col1 data, col 2 data, col 3 data ...)
...

I don't need the drill down. I was able to get something kind of working, but it seems hacky to me.

export class SomeGrid extends React.Component<ISomeGridProps, {}> {
  private api: ag.grid.GridApi;
  private columnApi: ag.grid.ColumnApi;
  private gridOptions: ag.grid.GridOptions;

  ...

  private onGridReady(params: any): void {
    this.api = params.api;
    this.columnApi = params.columnApi;
    this.api.setRowData(this.props.rowData);
  }

  private groupRowRenderer(params) {
    if (params.node.field === 'the_last_grouped_field') {
      return `<div>Some grouped row header</div>`;
    }

    return ''; // Don't want to create header rows for previously grouping.
  }

  private buildGridOptions(): ag.grid.GridOptions {
    const { rowData, columnDefinitions } = this.props;

    return ({
      rowData,
      columnDefs: columnDefinitions,
      groupUseEntireRow: true,
      groupDefaultExpanded: 4, // expand to the last group at the beginning.
      groupRowRenderer: this.groupRowRenderer
    });
  }

  ...
}

This works by using the groupDefaultExpanded grid option, but the main problem is the rows are positioned absolutely using the row height, so even if I don't create a row in groupRenderer, I have a space even if the style is display:none for those header rows because each row's abosulute top is calculated as top of last row + rowHeight. So my final header ends up being 4 rows down leaving a gap. I thought if I could reset the counter that is calculating top for each row, I could get it to work, but once again this seems hacky and I also don't think you expose it.

Just wondering if you have any suggestions or if you could point me to somewhere in the docs if this functionality exists.

SHIFT selection doesn't include pinned columns.

Just installed version 5.0.0-alpha.3.

I am able to SHIFT select multiple rows now. However, any columns that are pinned are not highlighted. That goes for columns that are pinned programmatically or by the user.

Dynamically refreshing all the data example

I have a service that is publishing data to the Grid and would like to refresh all or specific rows, do you have an example that shows me how to do this?

Its a lovely grid by the way.

Sorry posted it to the wrong issue. Please close.

Default cellRenderer for richSelect cell editor

I was having an issue where the richSelect cell editor wasn't rendering labels for the options in the virtual list. Each option was in the DOM and clickable but the div.ag-rich-select-row child was empty.

Adding a cellRenderer function to the cellEditorParams fixed the problem. Is this intentional or should it be falling back to the default renderer when not specified?

cellEditor: 'richSelect',
cellEditorParams: {
    values: ['one', 'two'],
    cellRenderer: params => params.value // removing this line breaks the cellEditor
}

Can't group anymore?

For some reason, it seems that in the new versions (5+) I cannot group columns anymore.
Is there a reason for it, or is it a bug? (Every time I drag them to the area, I see a no entrance icon)

Get row node by id

Since version 5.1.2, ag-grid now has a call back getRowNodeId().

Is there now a way to get node object from id? I am using this to implement custom checkbox. I would like to store the node id with the checkbox and get the node from the node id. Right now, i am storing the node reference with the checkbox through jquery.data.

I would also appreciate if you have a suggestion for an alternative.

Thanks

[mouse middle click] have onRowClicked work with middle click

Hi,
I think it would be a great option to have the possibility to "middle click" the rows (or cells).
Right now the events "onRowClicked" and "onCellClicked" are fired only when clicked with the left button.

It would be good if they would be always fired, so that the developer can manage what to do with the different buttons.
(Strangely, the cell is focused also when the middle button is clicked though)

refreshing data does not respond

Hello. It seems that refreshView() is not working as documented. Nor is softRefreshView(), even when setting volatile: true.

I added loggers to the source code, and I can get into the related function calls, but nothing happens. And no errors are returned.

Uncertain whether I'm doing something wrong. I'm following the same pattern in our app for calling other grid api methods, all of which work fine. Just not refreshing data. It takes a hard page reload to see the updated data in the grid.

Any way to not init ToolPanelComp?

We are passing showToolPanel: false, but is there a way to completely disable it and not render/initialize at all? ColumnSelectPanel is causing very poor performance issues and since we don't use the tool panel, we would like to make sure it doesn't render at all.

Timeline:

image

[filter set] setFilter does not update the "Select all"

When you set filter via api.setFilterModel the "Select all" option of "Set filtering" does not change according to selected values. It always stays checked.

There is one more related bug with this. If later you try to set new rows via api.setRowData your selected values of that filter will be gone (even with newRowsAction: 'keep'). Probably this happens because of this line.

Fix documentation of contextMenu

Hi.

Sorry, I am not sure about the best place to post this.
BTW, is there any repo/branch somewhere corresponding to the website ?

On the page grid-context-menu/index.php , you wrote

If you want to turn off the context menu completely, set the grid property suppressContextMenu=false.

Actually it is the opposite, the suppressContextMenu attribute should be set to true to disable the context menu.

force column sorting

Is there anyway to sort/force the order that the columns are displayed? Using ag-grid enterprise in angular and I order the columns in the columnDefs array. Specifically I need a column with a field of '@timestamp' to be the first column in the table. I splice @timestamp's column def to index 0 of my column def array.

The issue is that @timestamp always appears as the 2nd column, index 1. Just to try to fix it, I even added a .moveColumn() call into the onGridSizeChanged event. The column visibly moves back to the first item, and then about a second later, it moves back to the 2nd.

Back in ag-grid 4/x, column defs seemed to do just fine maintaining order.

Any ideas?

ag.grid.gridOptions deinfiton missing rememberGroupStateWhenNewData

Hi,

The grid options definition appears to be missing rememberGroupStateWhenNewData: boolean;. My guess is the definition is in the OSS version and that's why this is not included. Just a guess.

It's easy to circumvent, but I thought I would mention the issue anyways.

Here's the workaround for those in TypeScript land:

interface GridOptions extends ag.grid.GridOptions {
  rememberGroupStateWhenNewData: boolean;
}

Inconsistent scrolling when columns are pinned

If I pin columns, and then scroll up and down when my cursor is hovering over any of the pinned columns, the rows redraw just fine.

However if I scroll up and down when hovering over any UNpinned columns, there is a major lag in the redraw. Here's a screenshot to show you what I mean:

screen shot 2016-07-01 at 10 57 51 am

How do you use ag-grid-enterpise with ag-grid-react?

Hi, I'm looking at ag-grid-enterprise for a project in the react ecosystem. ag-grid-react has a dependency on ag-grid. If I have ag-grid-enterpise installed ag-grid-react still references ag-grid. Maybe I'm missing an obvious step to get ag-grid-react to use ag-grid-enterprise or is there an enterprise version of ag-grid-react?

[Feature] suppressRowCopy

When a cell is selected, and you press Ctrl + C, is copied to the clipboard.
When a row is selected, and also a cell is selected (maybe click, maybe arrow keys), and you press Ctrl + C, it will always copy the selected row.

Can you please add to the grid options: suppressRowCopy: Boolean (Default false)

(Added this here because the copy is an enterprise feature)

Filter request: Daterange

Can you please add to your filters (not as a custom filter) a new filter called 'date', and (or just) 'daterange'.
This filter should allow to select a daterange or a single date, and then the filter will compare dates and show the relevant rows.

Here is one for the bootstrap grid:
http://www.daterangepicker.com/
I am not sure what you can use for the other templates.

Can you add this to your feature list?

This grid is great, and I think before you are developing new features for v6.0.0, you should really perfect the features that already exist.

gridOptions.checkboxSelection not working as expected

Hi all!
Reading the doc I found out that gridOptions.checkboxSelection could be a function:
"gridOptions.checkboxSelection can also be specified as a function - use this if you want, for example, the first column to have checkbox selection regardless of which column it is (you would do this by looing at the params and returning true if colIndex = 0)."

If I pass something like "checkboxSelection: () => true" it should show the checkbox selection on each column, right?

I tried it with the ag-grid-react but it's not working...

Class 'ClipboardService' incorrectly implements interface 'IClipboardService'

Here is the error:

node_modules/ag-grid-enterprise/dist/lib/clipboardService.d.ts(2) Class 'ClipboardService' incorrectly implements interface 'IClipboardService'. Property 'copySelectedRangeToClipboard' is missing in type 'ClipboardService'.
Essentially IClipboardService has a required definition of copySelectedRangeToClipboard() which ClipboardService is not defining.

bugs in deselectAll

I am implementing a select all checkbox for the grid. When the checkbox is clicked, i either call gridOptions.api.selectAll() or gridOptions.api.deselectAll().

Version: ag-grid-enteprise 5.0.3
Steps to reproduce:

  • enable grow grouping.
  • calling selectAll will select the group rowNode
  • call deselectAll will not deselect the group nodeRow

Filter does not allow for complex objects using cellRendered values

see plunkr: https://plnkr.co/edit/3kLhFbPqUgWCzdVp9de1?p=preview

I have a complex field in my dataset that I need to keep as an object for the editor. I can't set the .field to .person.first because I need the editor to have access to the entire person object.

I use a cellRenderer to only render the first name. I use the same cellRenderer for the filter.

The setFilterModel is converting the person object to a string [Object object]. the cellRenderer for the filter then receives param.value = [Object object] instead of the actual person object.

private createAllUniqueValues() {
if (this.usingProvidedSet) {
this.allUniqueValues = _.toStrings(this.filterParams.values);
} else {
var uniqueValuesAsAnyObjects = this.getUniqueValues(false);
this.allUniqueValues = _.toStrings(uniqueValuesAsAnyObjects);
}

    this.sortValues(this.allUniqueValues);
}

No way to access tool bar after resetting columns during aggregation

Steps:

  1. Open the tool bar
  2. Choose Pivot mode
  3. Check a column (for grouping)
  4. Add a column to the values drag zone.
  5. Close the toolbar
  6. Click a column menu and select "reset columns"

After doing these steps there is no way to get back to the tool bar to disable pivoting - you have to refresh the browser. (unless you have you own dedicated toolpanel somewhere)

Volatile Display on setRowData

Hey -

Using ag-grid and constantly replacing all rows with setRowData every few seconds as new data comes in. I understand it would be ideal and efficient to update rather than replace, but new rows are created and old ones are removed so may be more of a strain on the CPU. But if I'm wrong and there is a better way to do this, please let me know.

Anyway when I call setRowData the currently selected row and filtered column are reset. I'm getting around this with the following code (below), but we are experimenting with Ag-Grid Enterprise to see if we should buy and we wanted to know if there's a way to reexpand the expanded groups?

var selected_currently = $scope.gridOptions.api.getSelectedNodes()[0];
var previous_filter_model = $scope.gridOptions.api.getFilterModel();

$scope.gridOptions.api.setRowData(orders.get());

if (selected_currently) $scope.gridOptions.api.selectNode(selected_currently, true, true);
if (previous_filter_model) $scope.gridOptions.api.setFilterModel(previous_filter_model);

More specifically we would like the view after the call to setRowData to essentially be that of before, just with updated row data.

Context menu copy

Hi,

Thank you for this excellent product. We're evaluating the enterprise version for the context-menu copy feature.

Is there any way to add callback before and after the context-menu "copy". Possible user-cases are:

  • provide my own formatted data to be copied to clipboard (not any cell, and not the entire row)
  • show some notification that the text was copied to clipboard.

Also, It'd be nice to be able to have the ability to modify the context-copy label as well. ( e.g. "Copy Selected Users" etc.)

Menu Icon

Menu icon override works, but when clicked on the default one comes back and cannot be overwritten.

cell flashing in React

Hi, I tried to use the "enableCellChangeFlash", but I couldn't let it work.
Probably it is just not fully documented and I didn't get how it should work though.

Anyway, I'm using ag-grid with ag-grid-react, so I was expecting that when passing new data (in the "rowData" prop), the changed cells should have flashed.
But they are not.
Am I missing something?

ag-grid drag n drop ghost element

I have an enterprise license and our app has a BODY height of 100%, and an element that takes up most of the body has thousands of pixels of height. Your logic to position the draggable columns into the Group Tray started failing after moving from 4.X to 5.1.2 of AG-GRID. Specifically, the dragged header column item top position (if the page is scrolled lower/more than the window height (what you are returning for getBodyHeight in chrome)). The Body height calculation is wrong in Chrome, what is being returned is the window viewable height, if you indeed want the 'full' body height. I can reproduce this in Chrome latest on Windows and OSX.

Then again, why worry about that at all? Can you assume if you have a drag event, then your browser has height. And top should just equal the mouseEvent.pageY since the dnd-ghost element is absolutely positioned.

if (browserHeight > 0) {
    top = event.pageY;     
}

REF CODE:
positionGhost method

jQuery Document Height code if you are looking for something to return the full body height:

    return Math.max(
      document.body[ "scrollHeight"], document.documentElement[ "scrollHeight"]],
      document.body[ "offsetHeight"], document.documentElement[ "offsetHeight"],
      document.documentElement[ "clientHeight"]);

Server side filter icon

Hello, please explain me how to show filter icon after custom filter is applied.

var customFilter;

customFilter = function() {
  return {
    init: function(params) {
      this.values = [];
      this.colDef = params.colDef;
      this.rowModel = params.rowModel;
      this.filterChangedCallback = params.filterChangedCallback;
      this.valueGetter = function() {
        return this.values;
      };
      this.filterParams = params.valueGetter;
      return this.setupGui(params);
    },
    setupGui: function(params) {
      this.gui = document.createElement('div');
      return this.gui.innerHTML = '<div style="height:100px;text-align:center;padding:10px;color:#666">Loading...</div>';
    },
    getGui: function() {
      return this.gui;
    },
    isFilterActive: function() {
      return this.valueGetter.length > 0;
    },
    doesFilterPass: function(params) {
      return this.valueGetter.length > 0;
    },
    afterGuiAttached: function(params) {
      var that, xhr;
      that = this;
      that.gui.innerHTML = '<div style="width:160.06px;text-align:center;padding:5px 0;color:#333">Loading...</div>';
      xhr = jsonRequest("/cases/filter?column=" + that.colDef.field);
      xhr.send();
      return xhr.onreadystatechange = function() {
        var html, i, id, len, option, ref, response;
        if (xhr.readyState === 4 && xhr.status === 200) {
          response = JSON.parse(xhr.responseText);
          id = that.colDef.field;
          html = "<select name='" + id + "' id='" + id + "' multiple='true'>";
          ref = response.values;
          for (i = 0, len = ref.length; i < len; i++) {
            option = ref[i];
            html += "<option value='" + option + "'>" + option + "</option>";
          }
          html += '</select>';
          html += '<div class="dropdown" style="position:relative"></div>';
          that.gui.innerHTML = html;
          $('#' + id).val(that.valueGetter());
          $('#' + id).select2({
            width: 160.04,
            placeholder: 'Search',
            dropdownParent: $('.dropdown')
          });
          params = that;
          return $('#' + id).on('change', function() {
            that.values = $('#' + id).val();
            gridOptions.api.setDatasource(dataSource);
            return gridOptions.api.refreshHeader();
          });
        }
      };
    },
    getApi: function() {
      var that;
      that = this;
      return {
        getModel: function() {
          return that.valueGetter();
        }
      };
    },
    isExternalFilterPresent: function() {
      return this.valueGetter.length > 0;
    }
  };
};

Copy/Paste with checkboxselection=true

We have checkboxselection=true and when the user checks a row, but then sometimes wants to copy a cell (other than the selected row) it only copies the selected row and not the cell the user chooses to copy.

getRowStyle() with undefined data

image

if I quickly scroll down, the new rows which were downloaded Ajax do not get the "object" as the parameter of function getRowStyle(params).

if I scroll up the page and down again, it will draw the rows is already normal.

Crash when built by angular-cli with --prod flag

No really sure whether this is the right place to raise the issue, as it might be caused by angular-cli. However, as the error is from ag-grid-enterprise, I opened the issue here.

The build process is fine, but when load the app into browser, following error can be found:

TypeError: this.cbPivotMode.setSelected is not a function at b.init (http://localhost:4200/main.js:30:3445) at eval (http://localhost:4200/main.js:42:10584) at Array.forEach (native) at eval (http://localhost:4200/main.js:42:10553) at Array.forEach (native) at a.postConstruct (http://localhost:4200/main.js:42:10432) at a.wireBeans (http://localhost:4200/main.js:42:8118) at a.wireBean (http://localhost:4200/main.js:42:8017) at b.addComponent (http://localhost:4200/main.js:29:25018) at b.init (http://localhost:4200/main.js:29:24571)

A minimal example to reproduce this error can be found here: https://github.com/xwb1989/ag-grid-test

is groupEntireRow broken ?

Hi,

I believe that there is a problem with the groupdEntireRow feature.

In the following exemple, https://jsfiddle.net/eafp3ye7/ , I can't find a way to hide the 'Make' columns
Looks like the behaviour changeed with the 4.0 refactoring.

Event Putting {headerName: "Make", field: "make", rowGroupIndex:0, width:-1} does not work because of default padding.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.