ngx-smartgrid
is a lightweight and flexible Angular table/grid component designed to work seamlessly across Angular 10 to 20+.
It offers a simple API to quickly build responsive tables with:
✅ Pagination, ✅ Search, ✅ Custom themes, ✅ Rounded and bordered styles — all with zero dependencies.
- ✅ Fully compatible with Angular 10 to Angular 20+
- ✅ Supports both NgModule and Standalone Components
- 📦 Easy to integrate into new or legacy projects
- 🔍 Client-side search
- 📄 Pagination support
- 🎨 Custom themes (theme1, theme2, theme3) or use your own styles
- 🟦 Bordered and rounded UI
- 🧩 Accepts dynamic headers and data
- 🧪 Lightweight and fast
npm install ngx-smartgrid
## 🔧 Usage
<ngx-smartgrid
[headers]="['Name', 'Age']"
[data]="myData"
[pagination]="true"
[enableSearch]="true"
[pageSize]="10"
[theme]="'theme1'"
[hover]="true"
[border]="true"
[rounded]="true"
></ngx-smartgrid>
## ✔️ For Angular(NgModule)
import { NgxSmartgridModule } from 'ngx-smartgrid';
@NgModule({
imports: [NgxSmartgridModule]
})
export class AppModule {}
## ✔️ For Angular 14–20+ (Standalone)
import { NgxSmartgridComponent } from 'ngx-smartgrid';
@Component({
standalone: true,
imports: [NgxSmartgridComponent],
template: `<ngx-smartgrid [headers]="..." [data]="..."></ngx-smartgrid>`
})
export class AppComponent {}
##🎨 Theming
ngx-smartgrid comes with 3 built-in themes:
theme1 – Light base
theme2 – Dark mode
theme3 – Minimal