angular_data_grid 2.0.1

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • 0

Demo

angular-dart-data-grid

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.

Prerequisites

Softwares

  • 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

transformers:
- dart_sass_transformer

Installing

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"
             [colDefs]="colDefs">
</custom-grid>

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 {{item.name}}
      </template>
    </custom-grid>

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 = [
     {
     	 'columnName':'column1',
     	 'displayName': 'displayName1',
       'isSortable': true      // this will make the column sortable. 
     },
     {
      'columnName':'column2',
     	'displayName': 'displayName2',
      'isSortable': false
     },
     {
      'columnName':'column3',
     	'displayName': 'displayName3',
      'isSortable': true
     }
     ]

Sample Data to be displayed in the grid.

   data = [
     {
     		'column1':value1,
     		'column2': value2,
     		'column3': value3
     },
     {
        'column1':value3,
     		'column2': value4,
     		'column3': value5
     },
     {
        'column1':value7,
     		'column2': value8,
     		'column3': value9
 
     }
     ]
 

Changelog

2.0.0

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

1.0.0

  • minor fixes

0.0.1

  • Initial version, created by Stagehand

Use this package as a library

1. Depend on it

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


dependencies:
  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
Popularity:
Describes how popular the package is relative to other packages. [more]
0
Health:
Code health derived from static analysis. [more]
0
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
0
Overall:
Weighted score of the above. [more]
0
Learn more about scoring.

The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.

Issues and suggestions

Support Dart 2 in pubspec.yaml.

The SDK constraint in pubspec.yaml doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://www.dartlang.org/dart-2#migration.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.23.0 <2.0.0