The input-table
component is a reusable Angular component designed to handle tabular data input. It integrates with Angular forms and provides a flexible way to manage table data with various configurations.
The input-table-type
component is a formly type that can be used with Angular Formly to create and manage table data.
<plastik-input-table>
To use the input-table
component, import it into your Angular module and include it in your template:
import { InputTableComponent } from './input-table.component';
@NgModule({
declarations: [AppComponent],
imports: [InputTableComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
In your template:
<plastik-input-table
[tableData]="data"
[tableColumnProperties]="columnProperties"
[tableSorting]="sortingConfig"
[tableActions]="actions"
[tableNoPagination]="noPagination"
[label]="'Table Label'">
</plastik-input-table>
The component type name is: input-table-type
const formly: FormlyFieldConfig = {
key: 'table',
type: 'input-table-type',
props: {
required: true,
tableDefinition: {
caption: 'Table',
columnProperties: [
{
key: 'name',
label: 'Name',
type: 'text',
required: true,
},
{
key: 'age',
label: 'Age',
type: 'number',
required: true,
},
],
getData: () => this.data,
},
tableRowValueConditionFn: (element: BaseEntity) => element.age > 18,
},
};
interface InputTableProps extends FormlyFieldProps {
/**
* Column definitions for the table
*/
tableColumnProperties: TableColumnProperty[];
/**
* Sorting configuration
*/
tableSorting?: {
active: string;
direction: 'asc' | 'desc';
};
/**
* Disable pagination
* @default false
*/
tableNoPagination?: boolean;
/**
* Custom actions for table rows
*/
tableActions?: TableAction[];
/**
* Label for the table
*/
label?: string;
}
interface TableColumnProperty {
/**
* Key of the column in data object
*/
key: string;
/**
* Display header text
*/
header: string;
/**
* Optional formatter function
*/
formatter?: (value: any) => string;
}
interface TableAction {
/**
* Action identifier
*/
id: string;
/**
* Display label
*/
label: string;
/**
* Icon name
*/
icon?: string;
}
Returns an array of objects representing the table data.
- Sorting not working: Verify tableSorting configuration
- Pagination issues: Check if tableNoPagination is set correctly
- Column formatting problems: Ensure tableColumnProperties are properly defined
- Performance issues with large datasets: Consider enabling virtual scrolling
Run nx test input-table
to execute the unit tests.