# Table

#### Usage

```jsx
import Table from 'components/Table/Table.js';
```

```jsx
<Table /> 
```

####

#### Props

| **name**                                     | **Description**                                                                                                                                                  | **Type**  | **Default** |
| -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
| **columns**                                  |                                                                                                                                                                  | ReactNode | null        |
| **onAdd**                                    | If defined a add button appear and clicking on it call this callback.                                                                                            | Function  | null        |
| **addText**                                  | Button content                                                                                                                                                   | ReactNode | null        |
| **onSearch**                                 | Called when search bar is changed. Return a Promise that resolve with a list of users. Argument is (query: string, maxResult: number)=>{return new Promise(...)} | Function  | null        |
| **onRequestNextPage, onRequestPreviousPage** | (token: string, maxResult: number)=>{return new Promise(...)}                                                                                                    | Function  | null        |
| **rowKey**                                   | (row)=>return row\.id                                                                                                                                            | Function  | null        |

**Functions (callable on the component from parent)**

| **name**                  | **Description**                             | **Type** |
| ------------------------- | ------------------------------------------- | -------- |
| **newElements(elements)** | Add new rows at the beginning of the table. | Function |

**Internal implementation**

* If no data in table, set loading to true, call onRequestNextPage without offset token.
* If next page button is clicked, get last row token, set Table to loading, and requestNextPage.
* When recieve result in requestNextPage, set loading to false and update data.
* Table must memorize already loaded pages to be faster
* Table must detect when request a page and no result is returned in this case disable corresponding button.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.twake.app/internal-documentation/frontend-components/table.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.