# Data Table Component {#data-table-component}


Using and customizing the smart data table for listing entities.


## Overview {#overview}


Gauzy uses Angular2 Smart Table (`angular2-smart-table`) for data display across the application. All list views use a consistent table component with filtering, sorting, pagination, and actions.


## Basic Usage {#basic-usage}


```typescript
@Component({
  template: `
    <angular2-smart-table
      [settings]="settings"
      [source]="source"
      (edit)="onEditRow($event)"
      (delete)="onDeleteRow($event)"
    >
    </angular2-smart-table>
  `,
})
export class MyListComponent {
  settings = {
    actions: {
      add: false,
      edit: { editButtonContent: '<i class="nb-edit"></i>' },
      delete: { deleteButtonContent: '<i class="nb-trash"></i>' },
    },
    columns: {
      name: { title: "Name", type: "string" },
      email: { title: "Email", type: "string" },
      status: {
        title: "Status",
        type: "custom",
        renderComponent: StatusBadgeComponent,
      },
      createdAt: {
        title: "Created",
        type: "custom",
        renderComponent: DateViewComponent,
      },
    },
  };
}
```


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


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

export class MyListComponent {
  source: ServerDataSource;

  constructor(private http: HttpClient) {
    this.source = new ServerDataSource(http, {
      endPoint: "/api/my-entity",
      dataKey: "items",
      totalKey: "total",
      pagerPageKey: "page",
      pagerLimitKey: "limit",
      sortFieldKey: "orderBy",
      sortDirKey: "order",
    });
  }
}
```


## Custom Render Components {#custom-render-components}


| Component              | Type    | Description           |
| ---------------------- | ------- | --------------------- |
| `DateViewComponent`    | Date    | Formatted dates       |
| `StatusBadgeComponent` | Badge   | Colored status badges |
| `AvatarComponent`      | Image   | User/employee avatar  |
| `ActionComponent`      | Actions | Row action buttons    |


## Related Pages {#related-pages}


- [Frontend Architecture](https://sourcey-gauzy.pages.dev/architecture/frontend-architecture/index.md) — frontend overview
- [Pagination & Filtering](https://sourcey-gauzy.pages.dev/api/pagination-and-filtering/index.md) — API pagination