repository·master·Indexed 23 days ago
https://github.com/akveo/ng2-smart-tableAn Angular component for displaying and managing data in interactive tables. Version 1.7.2 supports sorting, filtering, pagination, and inline CRUD operations. It includes a LocalDataSource for client-side data management, a PagerComponent for navigation, and the DataSet class for managing rows and selections. Developers can implement custom cell editors and column filters using the Editor and Filter interfaces.
The component provides several built-in capabilities for managing data:
Install the ng2-smart-table package as a dependency in your project using npm.
npm install --save ng2-smart-tableTo implement a basic table, you need to define a settings object containing at least a columns configuration, provide a data source (an array of objects), and use the <ng2-smart-table> component in your template. The keys in your data objects must match the keys defined in your columns configuration.
// 1. Define settings with required columns
settings = {
columns: {
id: { title: 'ID' },
name: { title: 'Full Name' },
username: { title: 'User Name' },
email: { title: 'Email' }
}
};
// 2. Define the data source
data = [
{ id: 1, name: "Leanne Graham", username: "Bret", email: "Sincere@april.biz" },
{ id: 2, name: "Ervin Howell", username: "Antonette", email: "Shanna@melissa.tv" }
];
@Component({
template: `
<ng2-smart-table [settings="settings" [source="data"></ng2-smart-table>
`
})To use the table, you must first import Ng2SmartTableModule and add it to the imports array of your Angular @NgModule.
import { Ng2SmartTableModule } from 'ng2-smart-table';
@NgModule({
imports: [
Ng2SmartTableModule,
// ...
],
declarations: [ ... ]
})
// ...When using ServerDataSource, you can configure how the class extracts the actual data array and the total record count from the server's HTTP response. This is done via the ServerSourceConf object.
dataKey is provided in the configuration, the class uses getDeepFromObject to find the array at that path within the response body. If not provided, it expects the response body itself to be the array.totalKey. If not found in the headers, it attempts to extract it from the response body using the same totalKey path.The CheckboxEditorComponent is a built-in cell editor for checkbox inputs. By default, it treats a checked state as true and an unchecked state as false. However, you can customize these values by providing a true or false key within the column configuration object.
When a user toggles the checkbox, the editor will emit the value specified in the column config instead of the literal boolean true or false.
The DataSet class is the core data structure in ng2-smart-table that manages the relationship between raw data, columns, and rows. It handles data updates, row creation, and selection logic (single and multiple selection).
setData(data: Array<any>) to update the table's content. This automatically regenerates the internal Row objects.selectRow(row: Row): Performs a single selection by deselecting all other rows and toggling the provided row.multipleSelectRow(row: Row): Toggles the selection state of a specific row without affecting others.deselectAll(): Clears all selections.selectRowByIndex(index: number): Selects a row based on its position in the table.getRows(): Returns the array of Row objects.getColumns(): Returns the array of Column objects.findRowByData(data: any): Locates a Row object that matches the provided raw data object.createNewRow(): Initializes a special newRow instance (with index -1) marked as isInEditing = true, typically used for adding new entries to the table.LocalDataSource class is used to manage data entirely on the client side. It handles local filtering, sorting, and pagination without requiring a backend API for these operations. You can initialize it with an array of data and use its methods to manipulate that data locally.setSort() to apply sorting to your local dataset. It accepts an array of configuration objects. Each object defines which field to sort by and the direction.setFilter() (to replace all current filters) or addFilter() (to add or update a specific field filter).The ng2-smart-table component is configured using two primary @Input properties:
source: The data provider. It accepts either a DataSource instance or a plain Array. If an array is provided, it is automatically wrapped in a LocalDataSource.settings: An object used to override the defaultSettings. This object controls the table's behavior, appearance, and features like pagination, filtering, and row actions.Note: Settings are merged with defaults using a deep extend, so you only need to provide the keys you wish to change.
setPaging() to define the current page and the number of items to display per page in the local dataset.