https://github.com/dj-fiorex/angular2-smart-table
Angular 2 Smart Data Table component
https://github.com/dj-fiorex/angular2-smart-table
Last synced: 5 months ago
JSON representation
Angular 2 Smart Data Table component
- Host: GitHub
- URL: https://github.com/dj-fiorex/angular2-smart-table
- Owner: dj-fiorex
- License: mit
- Fork: true (akveo/ng2-smart-table)
- Created: 2021-09-26T15:23:46.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2025-06-07T14:46:23.000Z (5 months ago)
- Last Synced: 2025-06-07T15:32:39.284Z (5 months ago)
- Language: TypeScript
- Homepage: https://dj-fiorex.github.io/angular2-smart-table/
- Size: 68.9 MB
- Stars: 53
- Watchers: 4
- Forks: 25
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
- fucking-awesome-angular - angular2-smart-table - Angular Smart Data Table component. (Third Party Components / Data Grids)
- awesome-angular - angular2-smart-table - Angular Smart Data Table component. (Third Party Components / Data Grids)
README
# Angular Smart Table Component
## 🚀 This fork will be updated and maintained! 🚀
I'm a self-employed developer so any help is welcome, open a pull request and help me improve this library
## NEW Features
* 🚀 Added hide/show row
* 🚀 Added Expandable Row (thanks [Samir](https://github.com/mominsamir))
* 🚀 Added Column resizing (thanks [dreswgfuse](https://github.com/dreswgfuse))
* 🚀 Added Multi Select for a column (thanks [thangluu93](https://github.com/thangluu93))
* 🚀 Added type to Settings object
* 🚀 Added Column resizing (thanks [dreswgfuse](https://github.com/dreswgfuse))
* 🚀 Added custom action render component (thanks [bacali95](https://github.com/bacali95))
* 🚀 Added Column sorting/filtering to nested objects (thanks [TejinderEvry](https://github.com/TejinderEvry))
* 🚀 Added row data to custom component render (thanks [marchrius](https://github.com/marchrius))
* 🚀 Include row data when invoking filterFunction (thanks [darrenhollick](https://github.com/darrenhollick))
* 🚀 Ability to select a row programmatically (thanks [NicolaLC](https://github.com/NicolaLC))
## Features
* Local data source (Server/API DataSource is on its way)
* Filtering
* Sorting
* Pagination
* Inline Add/Edit/Delete
* Flexible event model
## Installation
The library is available as npm package, so all you need to do is to run the following command:
```
npm i angular2-smart-table
```
This command will create a record in your `package.json` file and install the package into the npm modules folder.
## Minimal Setup Example
First thing you need to do is to import the angular2-smart-table directives into your component.
```
import { Angular2SmartTableModule } from 'angular2-smart-table';
```
Then register it by adding to the list of directives of your module:
```
// ...
@NgModule({
imports: [
// ...
Angular2SmartTableModule,
// ...
],
declarations: [ ... ]
})
// ...
```
Now, we need to configure the table and add it into the template. The only required setting for the component to start working is a columns configuration.
Let's register settings property inside of the component where we want to have the table and configure some columns [Settings documentation](https://github.com/dj-fiorex/angular2-smart-table):
```
settings: Settings = {
columns: {
id: {
title: 'ID'
},
name: {
title: 'Full Name'
},
username: {
title: 'User Name'
},
email: {
title: 'Email'
}
}
};
```
Finally let's put the angular2-smart-table component inside of the template:
```
// ...
@Component({
template: `
`
})
// ...
```
At this step you will have a minimal configured table. All functions are available by default and you don't need to configure them anyhow, so now you can add/edit/delete rows, sort or filter the table, etc.
Still it seems like something is missing... Right, there is no data in the table by default. To add some, let's create an array property with a list of objects in the component. Please note that object keys are the same as in the columns configuration.
```
data = [
{
id: 1,
name: "Leanne Graham",
username: "Bret",
email: "Sincere@april.biz"
},
{
id: 2,
name: "Ervin Howell",
username: "Antonette",
email: "Shanna@melissa.tv"
},
// ... list of items
{
id: 11,
name: "Nicholas DuBuque",
username: "Nicholas.Stanton",
email: "Rey.Padberg@rosamond.biz"
}
];
```
And pass the data to the table:
```
// ...
@Component({
template: `
`
})
// ...
```
Now you have some data in the table. -->
## Further Documentation
Installation, customization and other useful articles: https://github.com/dj-fiorex/angular2-smart-table
## License
[MIT](LICENSE.txt) license.
## How can I support developers?
- Star our GitHub repo :star:
- Create pull requests, submit bugs, suggest new features or documentation updates :wrench:
## Thanks to our contributors!
[
](https://github.com/igorkosteski)
[
](https://github.com/EphraimHaber)
[
](https://github.com/maixuanhan)
[
](https://github.com/stephanrauh)
[
](https://github.com/tawfiek)
## Special thanks to our awesome maintainers!
[
](https://github.com/hexdecimal16)
[
](https://github.com/uap-universe)
## Special thanks to AKVEO team for starting this project!
[
](https://github.com/nnixaa)[
](https://github.com/lexzhukov)[
](https://github.com/damnko)[
](https://github.com/Tibing)[
](https://github.com/Ezeon)[
](https://github.com/Deilan)[
](https://github.com/hoswey)[
](https://github.com/stacyakveo)[
](https://github.com/Akshaymisal5)[
](https://github.com/geneeblack)[
](https://github.com/vvandoorne)[
](https://github.com/ananthhh)[
](https://github.com/bis-sb)[
](https://github.com/tadashi-aikawa)
[
](https://github.com/nureha)[
](https://github.com/vlupu10)[
](https://github.com/zhouhao27)[
](https://github.com/hkb1990)[
](https://github.com/liaosong)[
](https://github.com/ktriek)
### From dj-fiorex, forked from akveo