@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

$3

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

$3

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

$3

- 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

$3

``
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 to use component and directive.

Tests

`
npm install
npm test
`

License

MIT`