@sedeh/flexible-table v3.2.6

Welcome to Flexible table!

Have you ever looked for a simple way of flushing your JSON data in a versatile table by passing in a few meta-data instructions just to get your data displayed the way you wanted with interactive components inside? AND how about adding graphics into the resulting table with some nifty formatting rules just by mapping your JSON data into table column headers! AND not paying a dime for it? Ha? Say it again!!

And all is done without writing much of any code!! On top of that, if you do not want to take time and write meta-data rules, FlexibleTable will generate the rules for you! You can feed any data to the table and see it tabulated!! without writing a single line of code!

FlexibleTable and LockTable are Angular based code. LockTable will allow you to lock/unlock columns. Both tables are fully configurable with pagination and ability to re-order table columns through drag/drop operation. You can insert a cusrtom content on top or bottom caption area in both tables usibng topCaption and bottomCaption as selectors.

NOTE Current version 3.2.6

Please send your requests or comments through Comments/Requests

View it in action on Live Demo

Get it from NPM

Features

• Responsive
• map any part of your data to a column in the table
• Pagination enabled / disabled
• Indexing enabled / disabled
• Expand / Collapse rows
• Configure any column to sort content
• Configure any column to show / hide
• Configure any column to format content
• Configure any column to reorder by drag/drop
• Configure any column to filter content
• ADA Compliant

Dependencies

MODULE:
  FlexibleTableModule

EXPORTS:
VocabularyInterface
PipeServiceComponentInterface
StyleServiceInterface
PaginationInfo
FlexibleTableHeader
PaginationType
CellEditInfo
FilteredItemsInfo
ActionEventInfo
ChangedtemsInfo
VisualizationPoint
FlexibleTableComponent
LockTableComponent
TableHeadersGenerator

DEPENDENCIES: 
    "@sedeh/drag-enabled": "^4.3.3",
    "@sedeh/into-pipes": "^4.5.3",
    "font-awesome": "^4.7.0"

Design system

Create a css file with the following and modify its value to fit your application needs. Then include it in root of application css file.

:root {
    --sedeh-text-color: black;
    --sedeh-text-background-color: white;
    --sedeh-marker-color: #fabdab;
    --sedeh-disabled-color: #888;
    --sedeh-margin: 0 5px;
    --sedeh-margin-right: 5px;
    --sedeh-margin-left: 5px;
    --sedeh-margin-bottom: 5px;
    --sedeh-padding: 5px;
    --sedeh-padding-top: 5px;
    --sedeh-padding-bottom: 5px;
    --sedeh-min-width: 25px;
    --sedeh-min-height: 25px;
    --sedeh-shift-right: -2px;
    --sedeh-focus-color: darkblue;
    --sedeh-sected-color: green;
    --sedeh-disapproved-color: red;
    --sedeh-hover-opacity: 0.5;
    --sedeh-box-shadow: 6px 8px 6px -6px #1b1b1b;
    --sedeh-solid-border: 1px solid #999;
    --sedeh-caption-color:  #fff;
    --sedeh-caption-background-color:  cadetblue;
    --sedeh-pagination-color:  #fff;
    --sedeh-pagination-background-color:  cadetblue;
    --sedeh-notice-color: white;
    --sedeh-notice-background-color: rgb(4, 159, 255);
    --sedeh-shim-color: rgba(255, 255, 255, 0.2);
    --sedeh-table-header-color: #bbb;
    --sedeh-table-header-border-color: #ccc;
    --sedeh-table-header-background-color: #eee;
    --sedeh-table-row-border-color: #ddd;
    --sedeh-table-row-hover-background-color: #FFEED2;
    --sedeh-table-cell-border-color: #B1B3B3;
    --sedeh-table-cell-color: #254a5d;
    --sedeh-alert-color: #8b0224;
    --sedeh-alert-border-color: #fff;
}

How to do it?

It is very simple. You have a JSON data to display and you want to allow user to configure columns, plus having ability to paginate, and sort/drag specific columns. All you will need is to add a header JSON and you are set to get the job done. That simple!!

Let's say you have the following data to be displayed:

{
  "guid": "701134c1-82cd-4f24-a867-f896350643f9",
  "isActive": false,
  "balance": "$3,666.56",
  "picture": "https://image.flaticon.com/icons/png/128/701/701997.png",
  "age": 37,
  "eyeColor": "brown",
  "name": "Cecelia Hartman",
  "gender": "female",
  "company": "MOMENTIA",
  "email": "ceceliahartman@momentia.com",
  "phone": "+1 (937) 578-2156",
  "address": {
    "street": "548 Clymer Street",
    "suite": "Apt. 556",
    "city": "Loveland",
    "zipcode": "92998-3641"
  },
  "about": "Est voluptate ea occaecat officia excepteur anim ipsum. Ipsum aliquip pariatur.\r\n",
  "registered": "2016-09-03T07:03:48 +07:00",
  "latitude": -56.348654,
  "longitude": 52.767967,
  "tags": [
    "est",
    "id",
    "ut",
    "sint",
    "cillum",
    "minim",
    "commodo"
  ],
  "friends": [
    {
      "id": 0,
      "name": "Yang Barrera"
    },
    {
      "id": 1,
      "name": "Rosella Lane"
    },
    {
      "id": 2,
      "name": "Doyle Welch"
    }
  ],
  "greeting": "Hello, Cecelia Hartman! You have 5 unread messages.",
  "favoriteFruit": "banana"
}

And you want user ID, name, user-name, the city he/she lives in, and the company works for. All you need is to map your data as it follows:

[
	  {key: "name",value: "Name",present: true, dragable:true, sortable: true},  
	  {key: "isActive",value: "Active",present: true, dragable:true, sortable: true, format: "if:~:true:\"font:fa fa-check:replace\":\"\""},
	  {key: "picture",value: "Picture",present: true, dragable:true, sortable: true, format: "image:auto:32px"},
	  {key: "address.city",value: "City", present: true, dragable:true, sortable: true},  
	  {key: "company",value: "Company",present: true, dragable:true, sortable: true} 
  ]

The above will instruct the table to make the mentioned columns visible and sortable. You can hide anyone of them or disable sorting on any columns. You can make them draggable or have the content of a cell formatted if you add a "format" attribute to the column meta-data you want to be formatted.

For example: "format: 'date:MM/dd/yyyy'" or "format: 'currency'"

Now you need to set the Pagination data To something like:

{
	pageSize:8,
	currentPage:1,
	from:0,
	resetSize: true,
	contentSize: 0
}

AND pagination data should re-evaluate contentSize immediately when data items are available

	this.service.usersList().subscribe(
    	(users) => {
        	this.users = users.json();
        	this.pageInfo.contentSize = this.users.length;
    	}
    )

Now you need to set the table tag in your HTML content:

<flexible-table 
      *ngIf="users" 
      caption="total records found {{users.length}}" 
      [headers]="usersHeader" 
      [items]="users" 
      [inlinePagination]="true"
      [pageInfo]="pageInfo"
      enableIndexing="true"
      actionable="true"
      configurable="true"
      [rowDetailer]="detailer"
      (onconfigurationchange)="onconfigurationchange($event)"
      (onaction)="onaction($event)">
      <div #topCaption>This should be rendered in top cption area</div>
      <div #bottomCaption>This should be rendered in bottom cption area</div>
      </flexible-table>

<ng-template #detailer let-detail="data">
  <div class="custom-class">
    <h3>Detail information about row {{detail.id}}</h3>
    <ol>
      <li>id: {{detail.id}}</li>
      <li>name: {{detail.name}}</li>
      <li>username: {{detail.username}}</li>
      <li>email: {{detail.email | into:'email'}}</li>
      <li>address: {{detail.address | into:'address'}}</li>
      <li>phone: {{detail.phone}}</li>
      <li>website: {{detail.website | into:'link'}}</li>
      <li>company: {{detail.company.name}}</li>
    </ol>
  </div>
</ng-template>

You will also need to implement a few functions

  allowExpanding(item, showIcon) {
    return (item.company || item.address); 
    // or any other way to determine if you can allow expanding of given item in a row
  }
  
  onaction(event) {
    // decide on what to do with the event
  }
  onconfigurationchange(event) {
    // decide on what to do with the event
  }

Interfaces

// service that controls specific cell in the table at a given location.
export interface StylePositionInterface {
    type: string;
    item?: any;
    header?: FlexibleTableHeader;
}
export interface StyleServiceInterface {
    styleFor(location: StylePositionInterface): string;
}

export interface FlexibleTableHeader {
  key: string; // key to identify column
  value: string; // column label
  present: boolean; // if column should be displayrf
  width?: string; // column width
  minwidth?: string; // minimum column width
  format?: string | string[]; // format column content into specified displayable component (use to IntoPipes)
  hideOnPrint?:boolean; // hide column when printing it
  filter?: string; // user editted key to filter rows on the column
  filterOptions?: string[]; // options if filter on column is a dropdown
  selectedFilterOption?: string; // selected option if filter is a dropdown
  dragable?: boolean; // if column can be dragged on
  dropable?: boolean; // if column can be dropped on
  sortable?: boolean; // if column can be sorted
  ascending?: boolean;// column soer order
  descending?: boolean;// column sort order
  class?:string; // apply css class on thecolumn
  locked?:boolean; // if column is locked in a lock tabled
  lockable?: boolean;// if column can be locked/unlocked in a lock table
  active: boolean; // if column can receive tab focun on its rows
  disabled: boolean;// if formatted columns are disabled and are not editable
  validate?: (tem: any, value: any) =>boolean; // if column row changes can be chaned after being validated
}

Attributes (LockTableComponent)

• Expand / Collapse rows (will not happen for LockTableComponent. But is available on FlexibleTableComponent)

Formatting the table cell content.

We are using "@sedeh/into-pipes" library. to see available formatting options, please follow what is supported by the library.

Attributes (FlexibleTableComponent)

Attributes (LockTableComponent)

Metadata Rules

Events

Filtering rules

Adding custom pipe component to create interactive cell items

import { Component, EventEmitter } from '@angular/core';
import { PipeComponent } from '@sedeh/into-pipes';

@Component({
    selector: 'link-component',
    template: `<a [href]="'http://somewhere.com/?id=' + data.userId" [target]="target" [textContent]="source"></a>`,
    styles: [
        `
        color: blue;
        `
    ]
})
export class CustomLinkComponent implements PipeComponent {
  source: string;
	id: string;
	data: any;
	name: string;
  title: string;
  target: string;
	onIntoComponentChange: EventEmitter<any>;

    transform(source: any, data: any, args: any[]) {
        this.data = data;
        this.source = source;
        this.target = (args && args.length) ? args[0] : "";
        this.title = (args && args.length > 1) ? args[1] : "";
    }
}

Then you need to register it

import { ComponentPool } from '@sedeh/into-pipes';
...
constructor(private pool:ComponentPool){
  // you can also register this as "link" in which it will override default link component.
  this.pool.registerComponent("myLink",new CustomLinkComponent())
}

then you will need to use your formatter in header meta-data

{key:'userName', value:'Name', present: true, format:'myLink'}

Using tags

Sample table tag in your HTML content:

<flexible-table 
      caption="total records found {{users.length}}" 
      action="View details of %name% where ID is %id%"
      actionKeys="%name%,%id%"
      tableInfo="users table"
      persistenceId="usersRecordsTable"
      persistenceKey="users-headers-05012019"
      [filterwhiletyping]="true"
      [headers]="usersHeader" 
      [items]="users" 
      [pageInfo]="userPageInfo"
      [styler]="styler"
      [enableIndexing]="true"
      [showActionable]="showActionable"
      [enableFiltering]="true"
      [configurable]="true"
      [inlinePagination]="true"
      [configAddon]="configAddon"
      [detailers]="{ global: globalDetailer, name: NameDetailer }"
      [expandable]="allowExpanding"
      (onfilter)="onfilter($event)"
      (onCellContentEdit)="onCellEdit($event)"
      (onconfigurationchange)="onconfigurationchange($event)"
      (onaction)="onaction($event)"></flexible-table>

<lock-table 
      caption="total records found {{lockUsers.length}}" 
      action="View details of %name% where ID is %id%"
      actionKeys="%name%,%id%"
      tableInfo="lock users table"
      [styler]="styler"
      [enableIndexing]="true"
      [enableFiltering]="true"
      [configurable]="true"
      [filterwhiletyping]="filterLockTyping"
      [inlinePagination]="inlineLockPagination"
      [headers]="lockHeader" 
      [items]="lockUsers" 
      [pageInfo]="lockPageInfo"
      (onfilter)="onfilter($event)"
      (onCellContentEdit)="onCellEdit($event)"
      (onconfigurationchange)="onconfigurationchange($event)"
      (onaction)="onaction($event)"></lock-table>

And the styler could because

class StylerService implements StyleServiceInterface {
	styleFor(location: StylePositionInterface) {
    switch(location.type) {
      case 'header': return location.header?.key === 'age' ? 'background-color: red;color: black' : 'background-color: #efefef;color: black';
      case 'filters': return location.header?.key === 'age' ?  'background-color: red;color: black' : 'background-color: #efefef;color: black';
      case 'row': return location.item ?
        (location.item.age === 31 ? 
            (location.header?.key === 'age' ? 'background-color: green;color: white' : 'background-color: red;color: white'): 
            (location.header?.key === 'age' ? 'background-color: red;color: white' : '')) :
        '';
      case 'detail': return location.item?.age === 31 ? 'background-color: green;color: white': 'background-color: #eee;';
    }
    return '';
  }
}

Revision History

How to include font-awesome in your project?

In your project root folder, find and open the file 'angular-cli.json' in any editor Locate the styles[] array and add font-awesome references directory. like:

"apps": 
	[
        {
            ....
            "styles": [
              "../node_modules/font-awesome/css/font-awesome.css"
              "styles.css"
            ],
            ...
        }
    ]