Dynamic Table

A powerful Angular Material-based Dynamic Table Library that provides configurable data tables with built-in support for:

• Sorting
• Pagination
• Search
• CRUD Actions
• Export
• Row Selection
• Dynamic Columns
• Client-side and Server-side operations
• Angular Reactive Search Forms

Feedback / Suggestion / Report issue

https://github.com/AravindhanSenthilkumar/Feedback/issues/1

Features

• 🚀 Dynamic column generation
• 🔍 Built-in search support
• 📄 Pagination
• ↕️ Column sorting
• ✏️ Edit records
• 👁️ View records
• ➕ Create records
• 🗑️ Delete records
• 📤 Export table data
• ✅ Row selection support
• 🎨 Angular Material Design
• ⚡ Client-side and Server-side operations

Installation

npm install devlab-one/dynamic-table

Component Usage

<lib-dynamic-table
  [dataset]="data"
  [tableDetails]="tableDetail"
  [search]="search"
  (action)="onTableAction($event)"
></lib-dynamic-table>

Dataset Structure

public data = {
  data: employeeData,
  totalRecords: employeeData.length
};

| Property | Description | | ------------ | ----------------------- | | data | Array of records | | totalRecords | Total available records |

Search Configuration

The table supports dynamic search forms generated using the Dynamic Form library.

public search: SearchModel = {
  formElements: this.searchForm,
  value: {},
  searchOn: SearchOn.MatchingColumns,
  searchAt: SearchAt.ClientSide
};

Search Modes

SearchOn.MatchingColumns
SearchOn.AllColumns

Search Locations

SearchAt.ClientSide
SearchAt.ServerSide

Table Configuration

public tableDetail: TableDetails = {
  paging: {
    enabled: true,
    pageSizeOptions: [5, 10, 25, 50, 100],
    pageNumber: 0,
    pageSize: 10
  },
  selectRequired: true,
  tableButtons: {
    add: true,
    edit: true,
    delete: true,
    view: true,
    export: true
  },
  columns: this.columnDetails()
};

Column Configuration

public columnDetails() {
  return [
    {
      columnDef: 'name',
      header: 'Name',
      sortRequired: true
    },
    {
      columnDef: 'department',
      header: 'Department',
      sortRequired: true
    },
    {
      columnDef: 'email',
      header: 'Email',
      sortRequired: true
    }
  ];
}

Column Properties

| Property | Description | | ------------ | -------------------------- | | columnDef | Property name from dataset | | header | Display header | | sortRequired | Enable sorting | | isComplex | Nested object support | | innerColumns | Child columns | | cell | Custom value renderer |

Custom Cell Rendering

{
  columnDef: 'projects',
  header: 'Projects',
  sortRequired: true,
  cell: (record) => {
    return record.projects;
  }
}

Pagination Configuration

paging: {
  enabled: true,
  pageSizeOptions: [5,10,25,50,100],
  pageNumber: 0,
  pageSize: 10
}

Table Buttons

tableButtons: {
  add: true,
  edit: true,
  delete: true,
  view: true,
  export: true
}

| Button | Description | | ------ | ---------------------- | | add | Create new record | | edit | Edit selected record | | delete | Delete selected record | | view | View selected record | | export | Export table data |

Events

All table interactions emit through a single action output.

<lib-dynamic-table
  (action)="onTableAction($event)"
></lib-dynamic-table>

Event Handler

public onTableAction(event: any) {
  switch (event.name) {
    case 'create':
      break;

    case 'edit':
      break;

    case 'delete':
      break;

    case 'view':
      break;

    case 'search':
      break;

    case 'pageChange':
      break;

    case 'sortChange':
      break;

    default:
      break;
  }
}

Available Events

Create

{
  name: 'create'
}

Edit

{
  name: 'edit',
  data: selectedRow
}

Delete

{
  name: 'delete',
  data: selectedRow
}

View

{
  name: 'view',
  data: selectedRow
}

Search

{
  name: 'search',
  data: searchValues
}

Pagination Change

{
  name: 'pageChange',
  pageIndex: 0,
  pageSize: 10
}

Sort Change

{
  name: 'sortChange',
  active: 'name',
  direction: 'asc'
}

Server-Side Pagination Example

Search Form Example

public searchForm: Form = {
  controls: [
    {
      type: FieldType.text,
      name: 'name',
      label: 'Name'
    },
    {
      type: FieldType.dropdown,
      name: 'department',
      label: 'Department',
      options: [
        {
          key: 'Engineering',
          label: 'Engineering'
        },
        {
          key: 'Marketing',
          label: 'Marketing'
        }
      ]
    }
  ]
};

Built With

• Angular 21+
• Angular Material
• Reactive Forms
• TypeScript

License

MIT License