Convert Figma logo to code with AI

akveo logong2-smart-table

Angular Smart Data Table component

1,629
877
1,629
965
View on GitHubView on NPM

Top Related Projects

TanStack's avatar

table

24,859

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

ag-grid's avatar

ag-grid

12,496

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

handsontable's avatar

handsontable

19,743

JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡

TanStack's avatar

table

25,081

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

mbrn's avatar

material-table

3,492

Datatable for React based on material-ui's table with additional features

primefaces's avatar

primeng

10,152

The Most Complete Angular UI Component Library

Quick Overview

ng2-smart-table is an Angular library that provides a powerful and customizable data table component. It offers features like sorting, filtering, and editing, making it easy to create interactive and responsive tables in Angular applications.

Pros

  • Highly customizable with numerous configuration options
  • Built-in support for sorting, filtering, and inline editing
  • Responsive design that works well on various screen sizes
  • Easy integration with Angular projects

Cons

  • Learning curve for advanced customizations
  • Limited built-in styling options, requiring additional CSS for complex designs
  • Performance may degrade with large datasets
  • Documentation could be more comprehensive for some advanced features

Code Examples

  1. Basic table setup:
import { Ng2SmartTableModule } from 'ng2-smart-table';

@NgModule({
  imports: [
    Ng2SmartTableModule,
    // other imports
  ],
})
export class YourModule { }
  1. Configuring table settings:
settings = {
  columns: {
    id: {
      title: 'ID',
    },
    name: {
      title: 'Full Name',
    },
    username: {
      title: 'Username',
    },
    email: {
      title: 'Email',
    },
  },
};
  1. Using the table in a component template:
<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
  1. Adding custom actions:
settings = {
  actions: {
    custom: [
      {
        name: 'view',
        title: '<i class="fa fa-eye"></i>',
      },
    ],
  },
  // other settings
};

Getting Started

  1. Install the package:

    npm install ng2-smart-table --save

  2. Import the module in your Angular app:

    import { Ng2SmartTableModule } from 'ng2-smart-table';

@NgModule({
  imports: [
    Ng2SmartTableModule,
    // other imports
  ],
})
export class AppModule { }

  3. Use the component in your template:

    <ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>

  4. Configure the table settings and data source in your component:

    settings = {
  columns: {
    id: { title: 'ID' },
    name: { title: 'Name' },
    // other columns
  },
};
data = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Smith' },
  // other data
];

Competitor Comparisons

TanStack logo

table

24,859

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

Pros of TanStack Table

  • Framework-agnostic, supporting React, Vue, Solid, and vanilla JS
  • More flexible and customizable, with powerful features like sorting, filtering, and pagination
  • Active development and larger community support

Cons of TanStack Table

  • Steeper learning curve due to its flexibility and advanced features
  • Requires more setup and configuration compared to ng2-smart-table

Code Comparison

ng2-smart-table:

<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>

TanStack Table (React example):

import { useTable } from '@tanstack/react-table'

function Table({ columns, data }) {
  const tableInstance = useTable({ columns, data })
  // ... render table using tableInstance
}

Key Differences

  • ng2-smart-table is specifically designed for Angular, while TanStack Table is framework-agnostic
  • TanStack Table offers more advanced features and customization options
  • ng2-smart-table provides a simpler, more opinionated API for quick setup
  • TanStack Table has better TypeScript support and documentation

Use Cases

  • Choose ng2-smart-table for quick, simple table implementations in Angular projects
  • Opt for TanStack Table when you need advanced features, cross-framework compatibility, or extensive customization

Community and Support

  • TanStack Table has a larger and more active community
  • ng2-smart-table has fewer recent updates but remains stable for Angular use
ag-grid logo

ag-grid

12,496

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

Pros of ag-grid

  • More feature-rich with advanced functionalities like pivoting, grouping, and aggregation
  • Better performance for handling large datasets
  • Extensive documentation and community support

Cons of ag-grid

  • Steeper learning curve due to its complexity
  • Larger bundle size, which may impact initial load times
  • Commercial license required for some advanced features

Code Comparison

ag-grid:

<ag-grid-angular
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [pagination]="true"
  [paginationPageSize]="10"
  (gridReady)="onGridReady($event)">
</ag-grid-angular>

ng2-smart-table:

<ng2-smart-table
  [settings]="settings"
  [source]="data"
  (deleteConfirm)="onDeleteConfirm($event)"
  (editConfirm)="onEditConfirm($event)"
  (createConfirm)="onCreateConfirm($event)">
</ng2-smart-table>

Both libraries offer powerful data grid solutions for Angular applications. ag-grid provides more advanced features and better performance for large datasets, but comes with a steeper learning curve and potential licensing costs. ng2-smart-table is simpler to use and integrate, making it suitable for smaller projects or those with basic data grid requirements. The choice between the two depends on the specific needs of your project, such as dataset size, required features, and development timeline.

handsontable logo

handsontable

19,743

JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡

Pros of Handsontable

  • More feature-rich with advanced functionalities like cell merging, filtering, and sorting
  • Supports multiple frameworks (React, Angular, Vue) and vanilla JavaScript
  • Extensive documentation and community support

Cons of Handsontable

  • Steeper learning curve due to its complexity
  • Larger file size, which may impact performance for simpler use cases
  • Commercial license required for some features

Code Comparison

ng2-smart-table:

<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>

Handsontable:

<hot-table [settings]="hotSettings" [data]="data"></hot-table>

Both libraries offer declarative ways to create data tables, but Handsontable provides more configuration options through its settings object.

Key Differences

  • ng2-smart-table is specifically designed for Angular, while Handsontable is framework-agnostic
  • Handsontable offers a spreadsheet-like experience, whereas ng2-smart-table focuses on basic table functionality
  • ng2-smart-table is open-source and free to use, while Handsontable has both free and commercial versions

Use Cases

  • Choose ng2-smart-table for simpler Angular-based projects with basic table needs
  • Opt for Handsontable when requiring advanced spreadsheet-like features across different frameworks or vanilla JavaScript
TanStack logo

table

25,081

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

Pros of TanStack Table

  • Framework-agnostic, supporting React, Vue, Solid, and vanilla JS
  • More flexible and customizable, with powerful features like sorting, filtering, and pagination
  • Active development and larger community support

Cons of TanStack Table

  • Steeper learning curve due to its flexibility and advanced features
  • Requires more setup and configuration compared to ng2-smart-table

Code Comparison

ng2-smart-table:

<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>

TanStack Table (React example):

import { useTable } from '@tanstack/react-table'

function Table({ columns, data }) {
  const tableInstance = useTable({ columns, data })
  // ... render table using tableInstance
}

Key Differences

  • ng2-smart-table is specifically designed for Angular, while TanStack Table is framework-agnostic
  • TanStack Table offers more advanced features and customization options
  • ng2-smart-table provides a simpler, more opinionated API for quick setup
  • TanStack Table has better TypeScript support and documentation

Use Cases

  • Choose ng2-smart-table for quick, simple table implementations in Angular projects
  • Opt for TanStack Table when you need advanced features, cross-framework compatibility, or extensive customization

Community and Support

  • TanStack Table has a larger and more active community
  • ng2-smart-table has fewer recent updates but remains stable for Angular use
mbrn logo

material-table

3,492

Datatable for React based on material-ui's table with additional features

Pros of material-table

  • Built specifically for Material-UI, offering seamless integration with Material Design
  • More extensive customization options for column rendering and cell editing
  • Better support for responsive design and mobile-friendly tables

Cons of material-table

  • Steeper learning curve due to more complex API and configuration options
  • Less out-of-the-box functionality for sorting and filtering compared to ng2-smart-table

Code Comparison

ng2-smart-table:

<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>

material-table:

<MaterialTable
  columns={columns}
  data={data}
  options={options}
  editable={editable}
/>

Both libraries offer declarative ways to create data tables, but material-table provides more granular control over table behavior and appearance through its props and options.

ng2-smart-table is designed for Angular applications, while material-table is built for React projects using Material-UI. This fundamental difference in framework support is a crucial factor when choosing between the two libraries.

material-table excels in providing a rich set of features for complex table interactions, such as row grouping, tree data, and custom column rendering. ng2-smart-table, on the other hand, offers a more straightforward approach with built-in sorting, filtering, and pagination capabilities that require less configuration out of the box.

primefaces logo

primeng

10,152

The Most Complete Angular UI Component Library

Pros of PrimeNG

  • Comprehensive UI component library with a wide range of components beyond data tables
  • Extensive theming and customization options
  • Active development and frequent updates

Cons of PrimeNG

  • Steeper learning curve due to the large number of components and features
  • Potentially larger bundle size if not using tree-shaking

Code Comparison

ng2-smart-table:

<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>

PrimeNG:

<p-table [value]="data" [columns]="cols">
  <ng-template pTemplate="header" let-columns>
    <!-- Header template -->
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <!-- Body template -->
  </ng-template>
</p-table>

Key Differences

  • ng2-smart-table focuses specifically on data tables, while PrimeNG offers a full suite of UI components
  • ng2-smart-table provides a more straightforward API for basic table functionality
  • PrimeNG's table component offers more advanced features and customization options

Use Cases

  • Choose ng2-smart-table for simpler projects requiring only data table functionality
  • Opt for PrimeNG when building larger applications that need a comprehensive UI component library

Community and Support

  • Both projects have active communities, but PrimeNG has a larger user base and more frequent updates
  • ng2-smart-table may be easier to contribute to due to its smaller scope

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Build Status

Angular Smart Table Component

ng2-smart-table component made with :heart: by Akveo team. Follow us on Twitter to get latest news about this component first!

⚠ Low Maintenance

Due to project priority and resource constraints, this project is currently on low maintenance. We recognize that there are a lot of activities around this package. However, we are unable to accommodate the maintenance this project requires.

Demo

Live Demo

alt tag

Installation

The library is available as npm package, so all you need to do is to run the following command:

npm install --save ng2-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 ng2-smart-table directives into your component.


import { Ng2SmartTableModule } from 'ng2-smart-table';

Then register it by adding to the list of directives of your module:

// ...

@NgModule({
  imports: [
    // ...
    
    Ng2SmartTableModule,
    
    // ...
  ],
  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:

settings = {
  columns: {
    id: {
      title: 'ID'
    },
    name: {
      title: 'Full Name'
    },
    username: {
      title: 'User Name'
    },
    email: {
      title: 'Email'
    }
  }
};

Finally let's put the ng2-smart-table component inside of the template:

// ...

@Component({
  template: `
    <ng2-smart-table [settings]="settings"></ng2-smart-table>
  `
})
// ...

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: `
    <ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
  `
})
// ...

Now you have some data in the table.

Further Documentation

Installation, customization and other useful articles: https://akveo.github.io/ng2-smart-table/

UI Bakery

Try low-code internal tool builder for free

How can I support developers?

  • Star our GitHub repo :star:
  • Create pull requests, submit bugs, suggest new features or documentation updates :wrench:
  • Follow us on Twitter :feet:
  • Like our page on Facebook :thumbsup:

Can I hire you guys?

Yes! Visit our homepage or simply leave us a note to contact@akveo.com. We will be happy to work with you!

Features

  • Local data source (Server/API DataSource is on its way)
  • Filtering
  • Sorting
  • Pagination
  • Inline Add/Edit/Delete
  • Flexible event model

License

MIT license.

Special thanks to our awesome contributors!

nnixaalexzhukovdamnkoTibingEzeonDeilanhosweystacyakveoAkshaymisal5geneeblackvvandoorneananthhhbis-sbtadashi-aikawa

nurehavlupu10zhouhao27hkb1990liaosongktriek

From akveo

Enjoy :metal: We're always happy to hear your feedback!

NPM DownloadsLast 30 Days