ngx-ui-builder/README.md

Angular - Render component ui with configurations

# 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.