angular_data_grid 2.0.1

  • Installing
  • Versions
  • 62



This is a custom grid build in angular dart with material design.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.



  • SASS -- need to install SASS in the machine for this to work.

Dart packages

  • Polymer
  • Polymer elements
  • dart sass transformer
dependencies :
  polymer: 1.0.0-rc.19
  polymer_elements: 1.0.0-rc.10

- dart_sass_transformer


Copy the custom-grid folder into your lib folder. Udpate the pubspec.yaml file. Include the custom-grid in the imports .

import 'package:angular_dart_data_grid/src/custom-grid/custom_grid.dart';

Add the CustomGridComponent in the directives

  directives: const [materialDirectives, CustomGridComponent],

Get the dependecies and run pub build/serve.

Using it in the HTML.

Inputs :

`showSelection : bool` 
      --  It will show the checkboxes for each of the rows if true .
`showActions : bool` 
      --  if true show the add / delete buttons whose functionality is customizable. 
          The delete button is visible only when atleast one of the checkboxes are selected.   
`data : List<>` 
      -- Data to be displayed in the grid. Expecting a list here.
`colDefs : List<>` 
      -- List of column definitions that are required to be shown in the grid. 
         We have add other options like	sortable also.
 `rowDetails : bool ` 
      -- if true this will make the expand the row on click and user can add a custom template
         to show more details of a particular data item.

Events :

add : AsyncAction<Null> -- fired when add button is clicked. delete : AsyncAction<List<>>
-- fired with the list of items selected when delete button is clicked. User can write their own delete function like below. (delete)="delete($event)" -- $event is the list of items selected in the grid. Just iterate the $event to get the individual items.

Basic Usage :

<custom-grid [showSelection]="true" [showActions]="true" (add)="add()" (delete)="delete($event)" [data]="sampleList"

The above example will show the checkboxes for each of the row, add/delete button and columns as per the column definitions.

Show Grid with custom template:

     <custom-grid [showSelection]="true" [showActions]="true" (add)="add()" (delete)="delete($event)" [data]="sampleList"
               [colDefs]="colDefs" [rowDetails]="true">
      <template #rowDetail let-item>
          This is detail of {{}}

In the above example we can enclose what we want to show as row detail in the template tag. The data item object will be passed to the 'item' and we can access its fields as item.<fieldName>.

Sample List and Column Definitions.

Column Definitions:

   colDefs = [
     	 'displayName': 'displayName1',
       'isSortable': true      // this will make the column sortable. 
     	'displayName': 'displayName2',
      'isSortable': false
     	'displayName': 'displayName3',
      'isSortable': true

Sample Data to be displayed in the grid.

   data = [
     		'column2': value2,
     		'column3': value3
     		'column2': value4,
     		'column3': value5
     		'column2': value8,
     		'column3': value9



  • updated to the latest angular version(4.0.0-alpha+3)


  • minor fixes


  • Initial version, created by Stagehand

1. Depend on it

Add this to your package's pubspec.yaml file:

  angular_data_grid: "^2.0.1"

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:angular_data_grid/angular_data_grid.dart';
Version Uploaded Documentation Archive
2.0.1 Aug 28, 2017 Go to the documentation of angular_data_grid 2.0.1 Download angular_data_grid 2.0.1 archive
2.0.0 Aug 28, 2017 Go to the documentation of angular_data_grid 2.0.0 Download angular_data_grid 2.0.0 archive
1.0.0 Aug 17, 2017 Go to the documentation of angular_data_grid 1.0.0 Download angular_data_grid 1.0.0 archive
0.0.1 Aug 16, 2017 Go to the documentation of angular_data_grid 0.0.1 Download angular_data_grid 0.0.1 archive


We analyzed this package on Apr 23, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.49.0
  • pana: 0.10.6


Describes how popular the package is relative to other packages. [more]
26 / 100
Code health derived from static analysis. [more]
97 / 100
Reflects how tidy and up-to-date the package is. [more]
100 / 100
Overall score:
Weighted score of the above. [more]
Learn more about scoring.


Detected platforms: web, other

Primary library: package:angular_data_grid/angular_data_grid.dart with components: mirrors.


  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 6 hints.

    Run dartfmt to format lib/angular_data_grid.dart.

    Run dartfmt to format lib/custom-template-outlet/ng_template_outlet.dart.

    Similar analysis of the following files failed:

    • lib/model/table_model.dart (hint)
  • Maintain an example.

    Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use angular_data_grid.dart.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.23.0 <2.0.0
angular ^4.0.0-alpha+3 4.0.0+2 5.0.0-alpha+10
angular_components ^0.6.0-alpha+2 0.6.0 0.8.0
angular_router ^1.0.0 1.0.2 2.0.0-alpha+10
polymer ^1.0.0-rc.19 1.0.0-rc.19
polymer_elements ^1.0.0-rc.10 1.0.0-rc.10
Transitive dependencies
analyzer 0.29.11 0.31.1
angular_compiler 0.3.0+1 0.4.0-alpha+10
angular_forms 1.0.0 2.0.0-alpha+2
args 0.13.7 1.4.2
async 2.0.6
barback 0.15.2+15
build 0.11.2 0.12.2
build_barback 0.4.0+2 0.5.0+3
charcode 1.1.1
cli_util 0.0.1+2 0.1.2+1
code_builder 1.0.4 3.0.3
code_transformers 0.5.1+3 0.5.1+4
collection 1.14.9
convert 2.0.1
crypto 2.0.2+1
csslib 0.14.1
dart_style 0.2.16 1.0.10
fixnum 0.10.7
func 1.0.0
glob 1.1.5
html 0.13.3
initialize 0.6.2+7
intl 0.15.6
isolate 1.1.0 2.0.0
js 0.6.1
logging 0.11.3+1
matcher 0.12.2
meta 1.1.2
observable 0.20.4+3 0.22.1
package_config 1.0.3
path 1.5.1
perf_api 0.1.0
plugin 0.2.0+2
polymer_interop 1.0.0-rc.10
pool 1.3.4
quiver 0.25.0 0.29.0+1
quiver_hashcode 1.0.0
reflectable 1.0.3 2.0.0
source_gen 0.7.5+1 0.8.1
source_maps 0.10.4
source_span 1.4.0
stack_trace 1.9.2
string_scanner 1.0.2
tuple 1.0.1
typed_data 1.1.5
utf 0.9.0+4
uuid 0.5.3 1.0.0
watcher 0.9.7+7
web_components 0.12.5
when 0.2.0
which 0.1.3
yaml 2.1.13
Dev dependencies
angular_test ^1.0.0-beta+2
browser ^0.10.0
dart_sass_transformer any
dart_to_js_script_rewriter ^1.0.1
test ^0.12.0