SortableTableAngular

An implementation of table in Angular that allows you to sort table by column. Clicking header of a column will sort that column. It will work on zoneless Angular projecrs.

To use it first import it in your component or module.

import { SortedTable } from "./sorted-table/sorted-table";
type inputCellData = {
  text: string, color: string, bgColor: string, width: string
}

@Component({
  selector: 'app-root',
  imports: [SortedTable],
  template : `<div id="tableContainer">
      <app-sorted-table [tableData]="tableData()" 
      [tableHeaders] = "tableHeaders()" [clickCell]="false" 
      (clickEvent)="clicked($event)"></app-sorted-table>
    </div>`,
  styles: `
    #tableContainer {
      position: absolute; width: 1000px; height: 1000px; 
      border: 1px solid purple;
    }

    :host {
          --headerBG: aqua;
          --headerColor: darkolivegreen;
          --headerBorder: 1px solid azure;
          --headerFont: italic  1.2rem  "Fira Sans", serif;
          --headerPadding: .5em;

          --cellBorder: 1px solid bisque;
          --cellTextAlign: center;
          --cellPadding: .5em;
          --cellLineHeight: 1em;
          --cellHoverColor: moccasin;
          --cellBackground: lemonchiffon;
          --cellbackgroundAlternative: lightcyan;
          --cellFont: 1rem  "Fira Sans", sans-serif;

          --tableHeight: 100%;
      }
  `
})

• [tableData]: It is the main content of your table. It will accept siganl of two dimensional array of string or inputCellData type. If you use inputCellData type, you can specify text color, background color of individual table cells. You can also set width. However width property effects whole column. Each cell is implemented using [innerHTML]. So you can pass html tags like <u> or <strong> for basic styling. However you cannot use <style> or <script>.

• [tableHeaders]: It is the header row of your table. It will accept a signal of an array of strings.

• [clickCell]": Set it to true if you want an event to fire every time a cell in table is clicked.

• (clickEvent): Pass in a funtion you want to run every time a cell in table is clicked. The function will not run if [clickcell] is set to false. Function argument is an object with then type {row: number, column: number, text: string}. This object contains row value, column value and text of the cell that was clicked.

In the css of the component where this table is implemented, you can set these css variables that effect the style of the table.

• --headerBG: Background color of the header row

• --headerColor: Text color of header row

• --headerBorder: Border style of header row

• --headerFont: Font of the header row

• --headerPadding: Padding around header row's text.

• --cellBorder: Border style of table cells;

• --cellTextAlign: Text alignment of texts in table cells.

• --cellPadding: Padding around text of each cell.

• --cellLineHeight: Line height text of each cell.

• --cellHoverColor: Backgorund color of each cell upon mouse hover.

• --cellBackground: Background color of odd numbered rows.

• --cellbackgroundAlternative: Background color of even numbered rows.

• --cellFont: Style of text of each cell.

• --tableHeight: Height of the table in respect ot tge parent div.

Here is an example of full implementation of this component

import { Component, signal } from '@angular/core';
import { SortedTable } from "./sorted-table/sorted-table";
type inputCellData = {
  text: string, color: string, bgColor: string, width: string
}
type eventData = {row: number, column: number, text: string};

@Component({
  selector: 'app-root',
  imports: [SortedTable],
  template : `<div id="tableContainer">
      <app-sorted-table [tableData]="tableData()" 
      [tableHeaders] = "tableHeaders()" [clickCell]="false" 
      (clickEvent)="clicked($event)"></app-sorted-table>
    </div>`,
  styles: `
    #tableContainer {
      position: absolute; width: 1000px; height: 1000px; 
      border: 1px solid purple;
    }

    :host {
          --headerBG: aqua;
          --headerColor: darkolivegreen;
          --headerBorder: 1px solid azure;
          --headerFont: italic  1.2rem  "Fira Sans", serif;
          --headerPadding: .5em;

          --cellBorder: 1px solid bisque;
          --cellTextAlign: center;
          --cellPadding: .5em;
          --cellLineHeight: 1em;
          --cellHoverColor: moccasin;
          --cellBackground: lemonchiffon;
          --cellbackgroundAlternative: lightcyan;
          --cellFont: 1rem  "Fira Sans", sans-serif;

          --tableHeight: 100%;
      }
  `,
})
export class App {
  tableData = signal<string[][] | inputCellData[][]>([]);
  tableHeaders = signal<string[]>([]);
  words = [
    'quite', 'bake', 'sail', 'sugar', 'sweater', 'cactus', 'scissors', 
    'toothpaste', 'carpenter', 'tongue', "drink", 'earth', 'sneeze', 
    'cannon', 'cabbage', 'doll', 'zebra', 'quilt', 'carrot', 'sneeze',
  ]

  ngOnInit() {
    const data: string[][] | inputCellData[][] = []; 
    const headers = [];
    for (let i = 1; i <= 10; i++) {
      headers.push('header ' + i);
      const currentRow = [];
      for(let ii = 1; ii <= 10; ii++) {
        //Randomly entering words in the array
        currentRow.push(
          this.words[Math.floor(Math.random() * this.words.length)] 
          + ' ' + i + 'x' + ii
        );
      }
      (data as string[][]).push(currentRow);
      this.tableHeaders.set(headers);
    }

    // You can pass htmls tags for basic styling.
    data[1][1] = '<u>' + data[1][1] + '</u>'; 
    /*color and bgColor will only effect individual cell. 
    Width will effect whole column*/
    data[2][2] = {
      text: (data[2][2] as string), color: 'khaki', 
      bgColor: 'teal', width: '15%'
    }; 
    

    this.tableData.set(data);
  }

  clicked(event: eventData) {
    // This function will only fire if clickCell set to true
    console.log(event);
  }
}