All Projects → NodeArt → Angular-Firebase-Sortable-Table

NodeArt / Angular-Firebase-Sortable-Table

Licence: other
Angular Firebase Sortable Table is a module that makes tables creation with firebase an easy task.

Programming Languages

typescript
32286 projects
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to Angular-Firebase-Sortable-Table

Angular Commerce
Angular components for scaffolding online store
Stars: ✭ 526 (+1778.57%)
Mutual labels:  angular2, angular4, angular-components, firebase-database
Angular5 Seed
Angular5 Seed for Application
Stars: ✭ 222 (+692.86%)
Mutual labels:  angularjs, angular2, angular-material, angular4
Angular Prest
pREST component for Angular
Stars: ✭ 16 (-42.86%)
Mutual labels:  angularjs, angular2, angular4, angular-components
Angular4-seed
Angular 4 Seed for Angular Forms
Stars: ✭ 37 (+32.14%)
Mutual labels:  angularjs, angular2, angular4, angular-components
Angular Interview Questions
Most extensive Angular interview questions based on your level.
Stars: ✭ 354 (+1164.29%)
Mutual labels:  angular2, angular-material, angular4, angular-components
angular2-cookie-law
Angular2+ component that provides a banner to inform users about cookie law
Stars: ✭ 38 (+35.71%)
Mutual labels:  angularjs, angular2, angular4, angular-components
Ng Select
⭐ Native angular select component
Stars: ✭ 2,781 (+9832.14%)
Mutual labels:  angular2, angular4, angular-components
Ngautocomplete
Light-weight autocomplete component for Angular.
Stars: ✭ 52 (+85.71%)
Mutual labels:  angularjs, angular2, angular4
Angular2
Angular 2 Seed
Stars: ✭ 75 (+167.86%)
Mutual labels:  angularjs, angular2, angular4
Paperadmin
A flat admin dashboard using Angular JS 2/4
Stars: ✭ 80 (+185.71%)
Mutual labels:  angularjs, angular2, angular4
Fef
The Front End Framework is a Thomson Reuters Tax and Accounting project to create a re-usable library for creating rich HTML based applications. The end goal is to assemble the publicly available libraries into a reference application with documentation along with best practice architecture.
Stars: ✭ 96 (+242.86%)
Mutual labels:  angularjs, angular2, angular-components
Fusebox Angular Universal Starter
Angular Universal seed project featuring Server-Side Rendering, @fuse-box bundling, material, firebase, Jest, Nightmare, and more
Stars: ✭ 132 (+371.43%)
Mutual labels:  angularjs, angular2, angular4
Ng Drag Drop
Drag & Drop for Angular - based on HTML5 with no external dependencies. 🎉
Stars: ✭ 233 (+732.14%)
Mutual labels:  angular2, angular4, angular-components
Ng Simple Slideshow
A simple, responsive slideshow for Angular 4+.
Stars: ✭ 119 (+325%)
Mutual labels:  angular2, angular4, angular-components
Awesome Angular
📄 A curated list of awesome Angular resources
Stars: ✭ 8,160 (+29042.86%)
Mutual labels:  angular2, angular4, angular-components
Nebular
💥 Customizable Angular UI Library based on Eva Design System 🌚✨Dark Mode
Stars: ✭ 7,368 (+26214.29%)
Mutual labels:  angular2, angular4, angular-components
ncg-crud-ngx-md
Angular 4+ Material Design CRUD/Admin app by NinjaCodeGen http://DNAfor.NET
Stars: ✭ 36 (+28.57%)
Mutual labels:  angular2, angular-material, angular4
Ngx Datatable
✨ A feature-rich yet lightweight data-table crafted for Angular
Stars: ✭ 4,415 (+15667.86%)
Mutual labels:  angular2, angular4, angular-components
firebase-bundle
A Symfony Bundle for the Firebase PHP Admin SDK
Stars: ✭ 112 (+300%)
Mutual labels:  firebase-db, firebase-database, firebase-authentication
laravel5Angular4
Laravel 5.4 & Angular 4.3.4
Stars: ✭ 37 (+32.14%)
Mutual labels:  angularjs, angular2, angular4

Angular Firebase Sortable Table

What is Angular Firebase Sortable Table (AFST)?

AFST is Angular module giving a solution for common problem - creation a table with firebase as a backend. It was decided to avoid using third part services as firebase cloud functions or writing own observer servers using node. Before you start it is strongly recommended to read an this article.

Getting started

AFST is supplied with small demo (source) that shows abilities of sortable table and the way one will use it. In order to start demo locally run npm run demo.

Note: npm package is not suplied with demo source code, so visit github page to see it.

List of components:

For full documentation of each component please visit this page.

Sources:

Install:

npm install @nodeart/ngfb_sortable_table --save

Description:

Module is supplied with set of features that could be useful while working with tables such as search, sort, filter and infinite scroll. Due to limitations of firebase querying there are no complicated logic under the hood. According to firebase documentation one can use only one orderBy query at a time, so, unfortunately you can not combine filters.

Events table:

There are 4 types of events could happen. Each of them has its own querying rules and usage restrictions.

Events InfiniteScroll SortByHeader FilterByInput FilterBySelect
Reset previous query false true true true
Basic query {orderByKey: true} {limitTo(First/Last): number, orderByChild: field} {orderByKey: true} orderByChild: field
Priority medium low low high

Events details:

  • InfiniteScroll:

    InfiniteScroll is a default event. First request to database will be done with it if no config for FilterBySelect provided. It is the only event that doesn't reset previous query, only add the offset. Fires when user is reached the bottom of the page.

    Requirements:

    • @Input pagination is passed;
  • SortByHeader:

    SortByHeader is an event that happen after toggling the arrow button on sortable header items.

    Restrictions:

    • field to be sorted by has primitive value;
    • field to be sorted by is not nested inside the object;

    Resets other queries.

  • FilterByInput:

    FilterByInput is an event happen when user input some data in a search string. Input is debounced by default.

    Restrictions:

    • field to be filtered by is a string;
    • field to be sorted by is not nested inside the object;

    Requirements:

    • @Input filterByInputValue is passed in;

    Resets other queries.

  • FilterBySelect:

    FilterBySelect event has the greatest priority value. If it is passed in than the first request to database will be made by the rules of this event.

    Restrictions:

    • field to be filtered by has primitive value;
    • field to be filtered by is not nested inside the object;

    Requirements:

    • @Input filterBySelect is passed in;

    Resets other queries.

User components communication:

AFST is designed for following components structure:

<user-table-container-component>
    <ngfb-sortable-table>
        <!--<ng-template ngfbSortableItem></ng-template>-->
        <tr UserTableItemComponent> </tr>
    </ngfb-sortable-table>
</user-table-container-component>

According to this structure you can not directly communicate between your components. In order to do so, you can provide an @Input onChange: Function to SortableTableComponent and it will be called in two cases:

Do not forget to bind your onChange function to your component context in order to save it.

Usage tips:

  • To improve firebase query performance use .indexOn rule in your database rules.
  • The selector of TableItemComponent that you pass inside SortableTableComponent must be attributive in order to be properly displayed. Example: tr [sortableTableItem].
  • To sort your headers use PriorityKeysPipe and pass enum with a list of headers as an argument and the list of headers you'd prefer not to show.
  • Always bind setHeaders function to your container component context if you use this keyword in setHedaers function because it will be called in SortableTableComponent context. As child component doesn't not know who his parent actually is, we can't use forward ref to done this.
  • As Angular 4 is released and <template></template> element is deprecated and will be replaced with <ng-template></ng-template>. We use <ng-template></ng-template> so this module is incompatible with Angular 2.

List of dependencies:

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].