Table

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

The Method To Use

The method is s.plt.table()

It must contain the following input variables:

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

And accepts the following input variables as optional:

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

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)
The table is in the default configuration.

2. Customization And Context

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:

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']
)
Table with more data and title.

3. Table with Links

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
)
Table with links

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

Download Data In .csv Format

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

When clicked the file is stored with an automatic name generated with the name of the table:

Result from a table named "test table"
Contents of the generated file

This feature is enabled by default, but can be easily disabled by changing the parameter downloadable_to_csv to False:

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.

    Product sales table

  • 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.

    Filter by product and category

Featured Content

Changing the Menu Path The menu path can be modified.

Using the Grid

It is possible to use any number of rows.

PreviousChartsNextButtons Column

Last updated

Was this helpful?