qgrid / ng Goto Github PK

View Code? Open in Web Editor NEW

15.0 15.0 9.0 58.3 MB

Angular grid

License: MIT License

JavaScript 84.03% HTML 7.36% CSS 8.61%

ng's Introduction

qgrid

Angularjs data grid

examples

https://qgrid.github.io/ng/

installation

$ npm install ng-qgrid
$ bower install ng-qgrid
https://plnkr.co/edit/cz0CL7?p=preview

core concepts

easy to start:

	<q-grid rows="data">
		<q-grid:columns generation="deep">
		</q-grid:columns>
	</grid>

virtualization everywhere: rows and columns should be virtualizable
considered styles: user should be able to make any css customization in easy format
fully customizable: header, cells, rows, footer etc. should be templatable
clear javascript: no html templates in javascript

development

$ npm install prerequisites
$ npm run start start the webpack development server on http:\\localhost:3030\demo
$ npm run build:prod create a js bundle with webpack
$ npm run lint run code quality tests
$ npm run test run tests
$ npm run test:debug watch and debug tests

release

$ npm run release create release version with tag. You should be authorized as qgrid user to publish it to npm
$ npm run publish publish the code to github pages

dependency diagram

We are trying to encapsulate any ui framework(angular in our case) dependencies to the separate module. We believe that it will give us a chance to migrate q-grid to other environments without big efforts(in plans angular2, react and vuejs)

licence

Code licensed under MIT license.

references

test

build

grid

ng's People

Contributors

Stargazers

Watchers

Forkers

vkorolev krossell peaceful-djony elbarto83 azkurban munkk julianhm9612 sherinkd nawalgupta

ng's Issues

test json data

Anybody knows where we can find good test cases for the grid?
I found out one that looks amazing:
https://github.com/arangodb/example-datasets/tree/master/RandomUsers

but it's not valid json, are we going to preprocess it?

The demo pages

Investigate other grids demo pages
Make small mockup
Choose ui framework (e.g. angular material) if we need it
Understand how we're going to show demo and code to the demo
Publish demo pages to gp(github pages)

Remove opportunity for user to set Resource for models

E.g.
gridModel.visibility({resource: false});

Choose the future templating strategy

<q-grid rows='data'>
	<q-grid:head>
   		<q-grid:td key="name.last">
   			<span style="background: #f00;">{{$column.title}}</span>
   		</q-grid:td>
   		<q-grid:td key="birthday">
   			<span style="background: #f00;">{{$column.title}}</span>
   		</q-grid:td>
   	</q-grid:head>
   	<q-grid:body>
   		<q-grid:td key="name.last">
   			<b>{{$cell.value()}}</b>
   		</q-grid:td>
   		<q-grid:td key="birthday">
   			{{$cell.value() | date:'yyyy/mm/dd'}}
   		</q-grid:td>
   	</q-grid:body>
</q-grid>

<q-grid rows='data'>
	<q-grid:column key="name.last">
		<q-grid:head-template>
			<span style="background: #f00;">{{$column.title}}</span>
		</q-grid:head-template> 
		<q-grid:cell-template>
			<b>{{$cell.value()}}</b>
		</q-grid:cell-template>
	</q-grid:column>
	<q-grid:column key="bithday">
   		<q-grid:head-template>
   			<span style="background: #f00;">{{$column.title}}</span>
   		</q-grid:head-template> 
   		<q-grid:cell-template>
   			{{$cell.value() | date:'yyyy/mm/dd'}}
   		</q-grid:cell-template>
   </q-grid:column>   		
</q-grid>

Component names in templates

what we're going to use in templates for defined rows and columns, waiting your comments bellow
My variants

<q-grid:(tr|td)>

<q-grid:(row|column)

The column title does not change the cursor to a hand, like actionable elements should

The column title does not change the cursor to a hand, like actionable elements should
On hover over a unsorted column, the sorting arrow points downward, but when you click on it,
it turns upward

q-grid column filter error

This might not be an issue with q-grid itself, but after I enter column filter text and then scroll the column value list , the following error is thrown on each scroll event.

qgrid.js:25454 Uncaught TypeError: items[i] is not a function
at qgrid.js:25454
at qgrid.js:25902
at Object.update (qgrid.js:25530)
at qgrid.js:25755
at Object.apply (qgrid.js:25602)
at Array. (qgrid.js:25753)
at Event.emit (qgrid.js:25500)
at HTMLDivElement.onScroll (qgrid.js:25824)
at HTMLDivElement.dispatch (jquery.js:4435)
at HTMLDivElement.elemData.handle (jquery.js:4121)

<q-grid:model />

<q-grid rows="$ctrl.rows"
              columns="$ctrl.columns"
              selection-mode="cell"
              selection-changed="$ctrl.select($event)">

   <q-grid:head sticky="false"></q-grid:head>
   <q-grid:foot sticky="false"></q-grid:foot>
  
   <q-grid:columns>
        <q-grid:column key="gender" /> 
        <q-grid:column....
   </q-gird:columns>

</q-grid

##vs

<q-grid>

   <q-grid:model for="data" rows="$ctrl.rows" columns="$ctrl.columns"></q-grid:model>
   <q-grid:model for="selection" mode="cell" changed="$ctrl.select($event)"></q-grid:model>
   <q-grid:model for="head" sticky="false"></q-grid:model>
   <q-grid:model for="foot" sticky="false"></q-grid:model>

   <q-grid:columns>
        <q-grid:column key="gender" /> 
        <q-grid:column....
   </q-gird:columns>

</q-grid

    {
      "name": {
	"first": "Diedre",
	"last": "Clinton"
      },
      "gender": "female",
      "birthday": "1959-11-06",
      "contact": {
	"address": {
	  "street": "2 Fraser Ave",
	  "zip": "81223",
	  "city": "Cotopaxi",
	  "state":"CO"
	},
	"email": ["[email protected]",
		  "[email protected]",
		  "[email protected]"],
	"region": "719",
	"phone": ["719-7055896"]
      },
      "likes": ["swimming"],
      "memberSince":"2009-03-14"
    }

Are we going to support compound keys?
e.g.

$scope.columns = [{
 key: 'name.first', //  compound path
 title: 'First Name'
}
];