@3kles/kles-material-table

@3kles/kles-material-table is a angular library to create table.

Changelog

Check out the changelog to check all the latest changes.

Models

Directives

• KlesTableDirective -> Directive to build table
• KlesTreetableDirective -> Directive to build tree table

Interfaces

IKlesCellFieldConfig

Interface to define the cell of a column, extends IKlesFieldConfig from @3kles/kles-material-dynamicforms

• executeAfterChange?: (property?: string, row?: any, group?: UntypedFormGroup | UntypedFormArray) => Observable -> Execute something after the value of a cell is update

IKlesHeaderFieldConfig

Interface to define the header of a column, extends IKlesFieldConfig from @3kles/kles-material-dynamicforms

• filterComponent?: Type -> Define a new filter component
• filterClearable?: boolean -> Set if the button to clear the filter is visible
• filterable?: boolean -> Set if the column is filterable
• filterPredicate?: (value: any, filter: any) => boolean -> Define a new filter predicate for the column
• sortable?: boolean -> Set if the column is sortable

KlesColumnConfig

Interface to manage column for table and lazy table

• columnDef: string -> Set the column def of the column
• sticky?: boolean -> Define if the column is sticky at the start
• stickyEnd?: boolean -> Define if the column is sticky at the end
• visible: boolean -> Define if the column is visible
• disabled?: boolean -> Define if the column is disabled
• name?: string -> Set the name of the column
• ngClass?: any -> Define a css class for the table
• filterable?: boolean -> Define if the column is filterable
• sortable?: boolean -> Define if the column is sortable
• resizable?: boolean -> Define if we can resize the column
• headerCell: IKlesHeaderFieldConfig -> Define the header of the column
• cell: IKlesCellFieldConfig -> Define the cell of the column
• footerCell?: IKlesCellFieldConfig -> Define the footer of the column if there is one
• canUnfold?: boolean -> Define if we can unfold this column on each cell
• align?: AlignCell -> Align the content of cells for this column

KlesTreeColumnConfig

Interface to manage column for tree table, extends KlesColumnConfig

• canExpand?: boolean -> Define if the column can be expand to see his children
• paginator?: boolean -> Define a paginator for the children
• paginatorOption?: { pageSize?: number; showFirstLastButtons?: boolean; hidePageSize?: boolean; pageSizeOptions?: number[] } -> Define the paginator options

KlesTableConfig

Interface to manage table

• id?: string -> Id of the table
• tableComponent: Type<any> -> Component to create the table
• columns: KlesColumnConfig[] -> Config of the columns
• tableService: AbstractKlesTableService -> Service of the table
• customMatPaginatorIntl?: Type<MatPaginatorIntl> -> Custom paginator to replace the default one
• selectionMode?: boolean -> Set lines multiple selection
• options?: Options<any> -> Set options to the table
• sortConfig?: Sort -> Define the sort config for sortable columns
• hidePaginator?: boolean -> Set if the paginator is visible
• pageSize?: number -> Define the number of lines
• pageSizeOptions?: number[] -> Define the options for the number of lines to display
• lineValidations?: ValidatorFn[] -> Define validators for the table lines
• lineAsyncValidations?: AsyncValidatorFn[] -> Define async validators for the table lines
• showFooter?: boolean -> Define if the footer is visible
• ngClassRow?: (row: UntypedFormGroup) => any -> Set css class to use for the lines
• multiTemplate?: boolean -> Define if the table have multi template
• templateUnfold?: { disabled?: (row: UntypedFormGroup) => boolean; cells: (IKlesCellFieldConfig & { colspan?: number | Span, rowspan?: number })[]; multiUnfold?: boolean; } -> Define table unfold templates
• templates?: { cells: (IKlesCellFieldConfig & { colspan?: number | Span, rowspan?: number })[], when?: ((index: number, rowData: any) => boolean) }[] -> Define table templates
• dragDropRows?: boolean -> Set if we can drag and drop the lines
• dragDropRowsOptions?: { autoScrollStep?: number; connectedTo?: string[]; dragDisabled?: (row: UntypedFormGroup) => boolean; dragPreview?: { matchSize?: boolean; component: Type; }; dragPlaceholder?: { component: Type; } } -> Set options for the drag and drop

Components

• KlesUnfoldCellComponent -> Component to create a cell that can be unfold
• KlesFormTextHeaderComponent -> Component to create a simple text header
• KlesFormTextHeaderFilterComponent -> Component to create a text header with a filter
• KlesTableComponent -> Component to create a table
• KlesTreetableComponent<T> -> Component to create a tree table
• KlesLazyTableComponent -> Component to create a lazy table
• KlesLazyTreetableComponent<T> -> Component to create a lazy tree table

Install

npm

npm install --save @3kles/kles-material-table

How to use

In the module

import { KlesMaterialTableModule } from '@3kles/kles-material-table';
...
@NgModule({
  imports: [
    KlesMaterialTableModule,
    ...
  ]
  ...
})

Example

const columns = [
      {
        columnDef: '#select', sticky: true, visible: true,
        headerCell: {
          type: 'checkbox',
          name: '#select',
          component: KlesFormCheckboxComponent,
          indeterminate: false,
        } as IKlesFieldConfig,
        cell: {
          type: 'checkbox',
          name: '#select',
          component: KlesFormCheckboxComponent,
          indeterminate: false,
        } as IKlesFieldConfig,
      },
      {
        columnDef: 'beginvalue',
        visible: true, sticky: true,
        filterable:true,
        resizable: true,
        headerCell: {
          type: 'input',
          name: 'beginvalue',
          component: KlesFormLabelComponent,
          value: 'Begin',
          pipeTransform: [{
            pipe: new UpperCasePipe
          }]
        } as IKlesFieldConfig
      },
      ...
        
];

const lines = [ { beginvalue: 1 },{ beginvalue: 10} ];

 const tableConfig = {
      tableComponent: KlesTableComponent,
      columns: this.columns,
      tableService: new KlesTableService()
}

<ng-container #table klesTable [tableConfig]="tableConfig" [lines]="lines"></ng-container>

Check the documentation to use component and directive.

Tests

npm install
npm test

License

MIT