# getTable

A Table model is a data model that represents a list of arbitrary data rows, with support for pagination and sorting. Suitable for displaying tables and lists.

## **Usage**

```typescript
const formula = await dataSource.getTable({
    columns: ['column_A','column_B'],
    sortBy: 'column_A',
    sortDirection: 'desc',
    sortByColumnType: 'number',
    limit: 10, // 10 rows per page
    offset: 30 // return the third page
    // + base options...
});
```

## **Options**

The `getTable` model inherits all options from the [base options](https://docs.carto.com/carto-for-developers/reference/carto-widgets-reference/models/..#model-base-options), plus:

```typescript
export interface TableRequestOptions extends BaseRequestOptions {
  columns: string[];
  sortBy?: string;
  sortDirection?: 'asc' | 'desc';
  sortByColumnType?: 'number' | 'string' | 'date';
  limit?: number;
  offset?: number;
}
```

* **columns:** an array containing the names of the columns that will be requested for each row.
* **sortBy** (optional): the name of the column that will be used for sorting.
* **sortDirection** (optional): whether to sort the table results in ascending (`asc`) or descending (`desc`) order
* **sortByColumnType** (optional): the data type of the column that will be used for sorting: `number`, `string` or `date`.
* **limit** (optional): the number of rows for each page.
* **offset** (optional): the number of rows to skip, useful in combination with the limit to build pagination.

## **Response**

The response is composed of two items:

* `rows`: A list of rows, where each row is an object that uses key-value pairs for each column.
* `metadata`: An object containing additional information such as the `total` number of rows in the table, useful for pagination.

```typescript
type TableModelResponse = {
  rows: Record<string, number | string>[];
  totalCount: number;
};
/* example response 
  {
    rows: [
      { id: 1, name: "Point A", risk: 30, population: 50000 },
      { id: 2, name: "Point B", risk: 25, population: 45000 },
      { id: 3, name: "Point C", risk: 35, population: 60000 },
    ],
    totalCount: 3
  } 
*/    
```

The response can be then mapped to a table-like HTML element, a list, or a charting library.

<figure><img src="https://3029946802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FybPdpmLltPkzGFvz7m8A%2Fuploads%2Fgit-blob-800e43d82168d7e1ea202ddadeb371683e8efc63%2FScreenshot%202024-10-07%20at%2020.23.22.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>