Angular Material Mobile Tree Table Component

What is this?

This is a representation of a tree table for mobile devices.

Why is this needed?

Because it is hard to represent a table, especially a tree table on small screens.

What data source should I use?

 [
     {
         foo: 'bar',
         ...
     },
     ...
 ]

 or

[
    {
        rowHeader: { 
                    foo: 'foo', 
                    bar: 'bar', 
                    ...
                    },
        children: [
             rowHeader: { ... },
             children: [
               {
                foo: 'bar',
                  ...
                },
              ...
             ]
        ]
    },
    ...
]

How many nesting levels could I use?

A LOT

Can I customize it somehow?

You can use templates to customize columns, and formatting functions to customize rows

...

Table of Contents

1. Installation
2. How to use
3. Complete example

Installation

npm coming soon...

import { MobileTreeTableModule } from 'mobile-tree-table';

@NgModule({
    ...
  imports: [
    ...
    MobileTreeTableModule
  ],
  ...
})
export class AppModule { }

<mobile-tree-table [dataSource]="dataSource" [columnHeaders]="columnHeaders" [rowHeaders]="rowHeaders"></mobile-tree-table>

How to use

dataSource = [
    {
      rowHeader: { title: 'John Doe Delivery', income: 1000000 },
      children: [
        {
          rowHeader: { title: 'Food delivery', income: 300000 },
          children : [
            {
              title: 'pizza',
              type: 'diavola',
              amount: '2',
              price: '14'
            },
            {
              title: 'steak',
              type: 't-bone',
              amount: '5',
              price: '99'
            },
            {
              title: 'sushi',
              type: 'dragon-set',
              amount: '1',
              price: '50'
            },
          ]
        },
        {
          rowHeader: { title: 'E-delivery', income: 700000 },
          children: [
            {
              title: 'iphone',
              type: '10S',
              amount: '2',
              price: '999'
            },
            {
              title: 'macbook',
              type: 'X-123-45',
              amount: '1',
              price: '2999'
            },
          ],
        },
      ],
    },
  ];

   rowHeaders = ['title', 'income'];
   columnHeaders = ['title', 'type', 'amount', 'price'];

User can customize column content using a template-based approach

<mobile-tree-table [dataSource]="dataSource" [columnHeaders]="columnHeaders" [rowHeaders]="rowHeaders">
  <column-item name="title">
    <div *columnLabel class="colored-title">title</div>
    <div *columnValue="let column">{{column.title}}</div>
  </column-item>

  <column-item name="type">
    <div *columnLabel>{{COLUMN_TYPE | translate}}</div>
    <div *columnValue="let column">{{column.type}}</div>
  </column-item>

  <column-item name="amount">
    <div *columnLabel>amount</div>
    <div *columnValue="let column" style="font-weight:bold">{{column.amount}}</div>
  </column-item>

  <column-item name="price">
    <div *columnLabel>price</div>
    <div *columnValue="let column">{{column.price | currency}}</div>
  </column-item>
</mobile-tree-table>

Notice, that in this case user will see only columns that have templates. In case of no templates, the user will see all columns that were specified in columnHeaders property with the default template

 <div class="column-item">
    <div>column.key</div>
    <div>column.value</div>
 </div>

To format rowHeaders, user can use rowHeaderFormatters property

 rowHeaderFormatters = {
   title: (name) => name.toUpperCase(),
   income: (value) =>  new CurrencyPipe('en').transform(value, 'USD')
 };

To use static row header for every page user can use property staticRowHeader

staticRowHeader = {title: 'static header title', value: 'static header value'}

In case of flat table dataSource

dataSource = [
    {
      title: 'pizza',
      type: 'diavola',
      amount: '2',
      price: '14'
    },
    {
      title: 'steak',
      type: 't-bone',
      amount: '5',
      price: '99'
    }
]

 columnHeaders = ['title', 'type', 'amount', 'price'];

<mobile-tree-table [dataSource]="dataSource" [columnHeaders]="columnHeaders"

Complete example

<mobile-tree-table 
    [dataSource]="dataSource" 
    [columnHeaders]="columnHeaders" 
    [rowHeaders]="rowHeaders"
    [staticRowHeader]="staticRowHeader"
    [rowHeaderFormatters]="rowHeaderFormatters">

  <column-item name="title">
    <div *columnLabel>title</div>
    <div *columnValue="let column">{{column.title}}</div>
  </column-item>

  <column-item name="type">
    <div *columnLabel>type</div>
    <div *columnValue="let column">{{column.type}}</div>
  </column-item>

  <column-item name="amount">
    <div *columnLabel>amount</div>
    <div *columnValue="let column" style="font-weight:bold">{{column.amount}}</div>
  </column-item>

  <column-item name="price">
    <div *columnLabel>price</div>
    <div *columnValue="let column">{{column.price | currency}}</div>
  </column-item>
</mobile-tree-table>

dataSource = [
    {
      rowHeader: { title: 'John Doe Delivery', income: 1000000 },
      children: [
        {
          rowHeader: { title: 'Food delivery', income: 300000 },
          children : [
            {
              title: 'pizza',
              type: 'diavola',
              amount: '2',
              price: '14'
            },
            {
              title: 'steak',
              type: 't-bone',
              amount: '5',
              price: '99'
            },
            {
              title: 'sushi',
              type: 'dragon-set',
              amount: '1',
              price: '50'
            },
          ]
        },
        {
          rowHeader: { title: 'E-delivery', income: 700000 },
          children: [
            {
              title: 'iphone',
              type: '10S',
              amount: '2',
              price: '999'
            },
            {
              title: 'macbook',
              type: 'X-123-45',
              amount: '1',
              price: '2999'
            },
          ],
        },
      ],
    },
  ];

  rowHeaders = ['title', 'income'];
  columnHeaders = ['title', 'type', 'amount', 'price'];
  staticRowHeader = {title: 'static header title', value: 'static header value'};
  rowHeaderFormatters = {
    title: (name) => name.toUpperCase(),
    income: (value) => new CurrencyPipe('en').transform(value, 'USD')
  };