# Smart Table Deep Dive {#smart-table-deep-dive}


Using angular2-smart-table for data display in Gauzy.


## Overview {#overview}


Gauzy uses [angular2-smart-table](https://akveo.github.io/ng2-smart-table/) extensively for data tables with support for:

- Sorting
- Filtering
- Pagination
- Inline editing
- Custom renderers


## Basic Configuration {#basic-configuration}


```typescript
settings = {
  columns: {
    name: { title: "Name", type: "string" },
    email: { title: "Email", type: "string" },
    status: { title: "Status", type: "string" },
  },
  actions: {
    add: false,
    edit: true,
    delete: true,
  },
  pager: {
    display: true,
    perPage: 10,
  },
};
```


## Custom Cell Components {#custom-cell-components}


```typescript
columns: {
  name: {
    title: 'Name',
    type: 'custom',
    renderComponent: EmployeeNameComponent,
  },
  status: {
    title: 'Status',
    type: 'custom',
    renderComponent: StatusBadgeComponent,
  },
}
```


## Server-Side Source {#server-side-source}


```typescript
import { ServerDataSource } from "ng2-smart-table";

this.source = new ServerDataSource(this.http, {
  endPoint: "/api/employee",
  dataKey: "items",
  totalKey: "total",
  pagerPageKey: "page",
  pagerLimitKey: "limit",
  sortFieldKey: "sortBy",
  sortDirKey: "order",
  filterFieldKey: "#field#",
});
```


## Event Handling {#event-handling}


```typescript
onEdit(event) {
  this.router.navigate(['/employees', event.data.id]);
}

onDelete(event) {
  if (confirm('Delete this employee?')) {
    this.employeeService.delete(event.data.id).subscribe();
  }
}
```


## Related Pages {#related-pages}


- [Nebular Components](https://sourcey-gauzy.pages.dev/frontend/nebular-components/index.md) — UI library
- [Responsive Design](https://sourcey-gauzy.pages.dev/frontend/responsive-design/index.md) — layouts
- [Pagination & Filtering](https://sourcey-gauzy.pages.dev/api/pagination-and-filtering/index.md) — API patterns