ngx-ui-builder

This library provide components that can generate by configs.

Installation

Using npm:

npm i ngx-ui-builder

Components

1. Table
2. Pagination

Example

Add ussage package to NgModule imports. The exmaple below describe how to use Table module.

// example.module.ts
import { NubTableModule } from 'ngx-ui-builder/table';

@NgModule({
  ...
  imports: [NubTableModule,...]
  ...
})

// example.compnent.ts
import { NubTableComponent, NubTableConfig } from 'ngx-ui-builder/table';

@Component({
  selector: 'app-example',
  template: '<nub-table [configs]="tableConfigs"></nub-table>',
})
export class TableComponent {
  @ViewChild(NubTableComponent) nubTable!: NubTableComponent;

  tableConfigs: NubTableConfig = {
    columnOptions: [
      {
        title: 'Name',
        property: 'name',
        sort: {},
        filter: {
          component: FilterCellNameComponent,
        },
      },
      {
        title: 'Link',
        property: 'url',
        component: LinkCellComponent,
        filter: {},
      },
    ],
    mapQueryParams: (queryParams) => {
      queryParams = Object.assign(
        {},
        queryParams,
      );
      return {
        limit: queryParams.pageSize,
        offset: queryParams.pageSize * (queryParams.page - 1),
      };
    },
    dataSource: (params: any) => {
      return this.httpClient.get(`yoururl?${params}`).pipe(
        map(res => {
          return {
            data: res['results'],
            totalItems: res['count'],
          };
        })
      );
    }
  };

  constructor(
    private httpClient: HttpClient
  ) { }

}

Compatibility

| ngx-ui-builder | Angular | |----------------|---------| | 0.x.x | 16.2.x |

Further information

The project is in the planning stage and will add more modules in the future. All questions or contributions are welcome.