# @3kles/kles-material-table @3kles/kles-material-table is a angular library to create table. ## Changelog Check out the [changelog](./CHANGELOG.md) 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\ -> Component to create the table - columns: KlesColumnConfig[] -> Config of the columns - tableService: AbstractKlesTableService -> Service of the table - customMatPaginatorIntl?: Type\ -> Custom paginator to replace the default one - selectionMode?: boolean -> Set lines multiple selection - options?: Options\ -> 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\ -> Component to create a tree table - KlesLazyTableComponent -> Component to create a lazy table - KlesLazyTreetableComponent\ -> Component to create a lazy tree table ## Install ### npm ``` npm install --save @3kles/kles-material-table ``` ## How to use In the module ```javascript import { KlesMaterialTableModule } from '@3kles/kles-material-table'; ... @NgModule({ imports: [ KlesMaterialTableModule, ... ] ... }) ``` ## Example ```typescript 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() } ``` ```html ``` Check the [`documentation`](https://doc.3kles-consulting.com/#/material/materialtable) to use component and directive. ## Tests ``` npm install npm test ``` ## License [`MIT`](./LICENSE.md)