# Table

Resources on how to build a table with your data, and personalize it.

## The Method To Use <a href="#the-method-to-use" id="the-method-to-use"></a>

The method is `s.plt.table`()

It must contain the following input variables:

```python
order: int, 
data: Union[str, pd.DataFrame, List[Dict], Dict],
```

And accepts the following input variables as optional:

```python
columns: Optional[List[str]] = None, 
columns_button: bool = True,
filters: bool = True, 
export_to_csv: bool = True, 
search: bool = True,
page_size: int = 10, 
page_size_options: Optional[List[int]] = None,
initial_sort_column: Optional[str] = None, 
sort_descending: bool = False,
columns_options: Optional[Dict] = None,
categorical_columns: Optional[List[str]] = None,
label_columns: Optional[Dict] = None,
web_link_column: Optional[str] = None,
open_link_in_new_tab: bool = False,
**component_params
```

## Examples

### 1. Default Configuration <a href="#id-1.-default-configuration" id="id-1.-default-configuration"></a>

```python
data = [
    {'date': dt.date(2021, 1, 1), 'x': 5, 'y': 5, 'filtA': 'A', 'filtB': 'B'},
    {'date': dt.date(2021, 1, 2), 'x': 6, 'y': 5, 'filtA': 'B', 'filtB': 'Z'},
    {'date': dt.date(2021, 1, 3), 'x': 4, 'y': 5, 'filtA': 'C', 'filtB': 'W'},
    {'date': dt.date(2021, 1, 4), 'x': 7, 'y': 5, 'filtA': 'B', 'filtB': 'T'},
    {'date': dt.date(2021, 1, 5), 'x': 3, 'y': 5, 'filtA': 'A', 'filtB': 'Z'},
]

s.plt.table(data=data, order=0)
```

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FEN1A4nRuVQTrSrXWlBYs%2FTable.png?alt=media&#x26;token=0cfb2327-4f40-440e-b4c0-a8fde0f7a3ff" alt=""><figcaption><p>The table is in the default configuration.</p></figcaption></figure>

### 2. Customization And Context <a href="#id-2.-modifying-the-data-frame" id="id-2.-modifying-the-data-frame"></a>

You can personalize the table by changing the column names in the input dataframe, defining by which columns the table can be sorted and adding a title:

```python
data = [
    {'date': dt.date(2021, 1, 1), 'Bus1': 5, 'Bus2': 5, 'filtA': 'A', 'filtB': 'Z'},
    {'date': dt.date(2021, 1, 2), 'Bus1': 6, 'Bus2': 7, 'filtA': 'B', 'filtB': 'Z'},
    {'date': dt.date(2021, 1, 3), 'Bus1': 4, 'Bus2': 5, 'filtA': 'A', 'filtB': 'W'},
    {'date': dt.date(2021, 1, 4), 'Bus1': 7, 'Bus2': 8, 'filtA': 'B', 'filtB': 'W'},
    {'date': dt.date(2021, 1, 5), 'Bus1': 3, 'Bus2': 5, 'filtA': 'A', 'filtB': 'Z'},
    {'date': dt.date(2021, 1, 6), 'Bus1': 5, 'Bus2': 5, 'filtA': 'A', 'filtB': 'Z'},
    {'date': dt.date(2021, 1, 7), 'Bus1': 6, 'Bus2': 7, 'filtA': 'B', 'filtB': 'Z'},
    {'date': dt.date(2021, 1, 8), 'Bus1': 4, 'Bus2': 5, 'filtA': 'A', 'filtB': 'W'},
    {'date': dt.date(2021, 1, 9), 'Bus1': 7, 'Bus2': 5, 'filtA': 'B', 'filtB': 'W'},
    {'date': dt.date(2021, 1, 10), 'Bus1': 3, 'Bus2': 7, 'filtA': 'A', 'filtB': 'Z'},
    {'date': dt.date(2021, 1, 11), 'Bus1': 5, 'Bus2': 5, 'filtA': 'A', 'filtB': 'Z'},
    {'date': dt.date(2021, 1, 12), 'Bus1': 6, 'Bus2': 5, 'filtA': 'B', 'filtB': 'Z'},
    {'date': dt.date(2021, 1, 13), 'Bus1': 4, 'Bus2': 8, 'filtA': 'A', 'filtB': 'W'},
    {'date': dt.date(2021, 1, 14), 'Bus1': 7, 'Bus2': 5, 'filtA': 'B', 'filtB': 'W'},
    {'date': dt.date(2021, 1, 15), 'Bus1': 3, 'Bus2': 5, 'filtA': 'A', 'filtB': 'Z'},
    {'date': dt.date(2021, 1, 16), 'Bus1': 5, 'Bus2': 8, 'filtA': 'A', 'filtB': 'Z'},
    {'date': dt.date(2021, 1, 17), 'Bus1': 6, 'Bus2': 5, 'filtA': 'B', 'filtB': 'Z'},
    {'date': dt.date(2021, 1, 18), 'Bus1': 4, 'Bus2': 7, 'filtA': 'A', 'filtB': 'W'},
    {'date': dt.date(2021, 1, 19), 'Bus1': 7, 'Bus2': 5, 'filtA': 'B', 'filtB': 'W'},
    {'date': dt.date(2021, 1, 20), 'Bus1': 3, 'Bus2': 7, 'filtA': 'A', 'filtB': 'Z'},
]

s.plt.table(
    data=data, order=0, 
    rows_size=4, title='Table test', page_size_options=[3, 5, 10],
    initial_sort_column='date', sort_descending=True, 
    categorical_columns=['filtA', 'filtB']
)
```

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FkbKr9YNjdEHhI35lWWpJ%2FTable%20with%20configuration.png?alt=media&#x26;token=0420b99e-76cb-4e29-9333-f922492b3705" alt=""><figcaption><p>Table with more data and title.</p></figcaption></figure>

### 3. Table with Links <a href="#id-2.-modifying-the-data-frame" id="id-2.-modifying-the-data-frame"></a>

```python
data = [
    {'link': 'https://www.shimoku.com'},
    {'link': 'https://docs.shimoku.com'},
    {'link': 'https://www.shimoku.io'},
    {'link': 'https://github.com/shimoku-tech/shimoku-app-templates'},
    {'link': 'https://github.com/shimoku-tech/shimoku-api-python'}
]
s.plt.table(
    order=0, data=data, 
    web_link_column='link', 
    open_in_new_tab=True
)
```

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FOe7pqL67FXzCrJ74dgwS%2Fimatge.png?alt=media&#x26;token=5f6549bf-3bec-43aa-bb54-ebaabde56253" alt=""><figcaption><p>Table with links</p></figcaption></figure>

## Behavior

Important behavior considerations to have in mind.

### **Pagination**

If you build a table with more than 10 rows, more pages are added and to show the entire table just click the > symbol:

![Table with pagination activated](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FdFbqesEMqS7N1YwJ3Zcf%2FPagination%20table.png?alt=media\&token=8c387c25-435d-43ce-93b5-277bbb4b29fe)

### **Download Data In .csv Format**&#x20;

You can retrieve the data from the table in .csv format by clicking the download button showed bellow:

![Table with the option to download the data](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FQLzwo63Azqef7PycKouq%2FExport%20table.png?alt=media\&token=3bccbc03-b48f-475e-a061-524efcf188ec)

When clicked the file is stored with an automatic name generated with the name of the table:&#x20;

<div align="center"><figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FsVZiJKIr2n9HIM05mbqi%2FScreenshot%20from%202022-10-26%2013-16-44.png?alt=media&#x26;token=9bd766c8-cfc5-453c-9f55-7bba9c38c3dc" alt=""><figcaption><p>Result from a table named "test table"</p></figcaption></figure></div>

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FIZ3UG1Y4edJVGVEcADl4%2FScreenshot%20from%202022-10-26%2013-18-08.png?alt=media&#x26;token=65bde16f-eb86-4f40-ab67-a8d2d7e44afe" alt=""><figcaption><p>Contents of the generated file</p></figcaption></figure>

This feature is enabled by default, but can be easily disabled by changing the parameter *downloadable\_to\_csv* to *False*:

```python
s.plt.table(
    data=data, order=0,
    title="No csv button",
    export_to_csv=False,
)
```

## Interesting Usages

* Data visualization: Tables are a great way to display large amounts of data in a structured format. For example, you could use a table to display sales data for different products over multiple time periods. The rows can be sorted by the specified sorting columns, allowing the user to quickly find the information they need. For example, you could use a table to display a list of products and allow the user to sort the list by price, popularity, or other attributes.

  <figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FTnNduOAmYYpS355fETvz%2Fimatge.png?alt=media&#x26;token=dc22fdf1-2146-4215-a5e2-6add2e5a1531" alt=""><figcaption><p>Product sales table</p></figcaption></figure>
* Filtering data: Tables can also be used to filter data by text and/or by categories. For example, you could use a table to display a list of customers and allow the user to filter the list by name, location, or other attributes.

  <figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FVDrMPfcG3i2pPQ6g5LV8%2Fimatge.png?alt=media&#x26;token=4984be2d-8211-4383-954f-367c58f95500" alt=""><figcaption><p>Filter by product and category</p></figcaption></figure>

{% hint style="info" %}

### Featured Content

[changing-the-menu-path](https://docs.shimoku.com/dev/building-web-app/menu/changing-the-menu-path "mention")\
The `menu path` can be modified.<br>

[using-the-grid](https://docs.shimoku.com/dev/building-web-app/grid/using-the-grid "mention")

It is possible to use any number of rows.
{% endhint %}


---

# 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://docs.shimoku.com/dev/elements/charts/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.