# 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 %}