Plotly – Express-14-Dash implementation table

This article describes how to implement tables in Dash and add data to tables using app.layout = dash_table.datatable ()

parameter

Parameter a: https://dash.plotly.com/datatable/style

DataTable(active_cell=undefined, columns=undefined, include_headers_on_copy_paste=undefined,
          locale_format=undefined, css=undefined, data=undefined, data_previous=undefined,
          data_timestamp=undefined, editable=undefined, end_cell=undefined,id=undefined, 
          export_columns=undefined, export_format=undefined, export_headers=undefined, 
          fill_width=undefined, hidden_columns=undefined, is_focused=undefined,
 merge_duplicate_headers=undefined, fixed_columns=undefined, fixed_rows=undefined,  column_selectable=undefined, row_deletable=undefined, row_selectable=undefined,  selected_cells=undefined, selected_rows=undefined, selected_columns=undefined,  selected_row_ids=undefined, start_cell=undefined, style_as_list_view=undefined,  page_action=undefined, page_current=undefined, page_count=undefined,  page_size=undefined, dropdown=undefined, dropdown_conditional=undefined,  dropdown_data=undefined, tooltip=undefined, tooltip_conditional=undefined,  tooltip_data=undefined, tooltip_delay=undefined, tooltip_duration=undefined,  filter_query=undefined, filter_action=undefined, sort_action=undefined,  sort_mode=undefined, sort_by=undefined, sort_as_null=undefined,  style_table=undefined, style_cell=undefined, style_data=undefined,  style_filter=undefined, style_header=undefined, style_cell_conditional=undefined,  style_data_conditional=undefined, style_filter_conditional=undefined,  style_header_conditional=undefined, virtualization=undefined,  derived_filter_query_structure=undefined, derived_viewport_data=undefined,  derived_viewport_indices=undefined, derived_viewport_row_ids=undefined,  derived_viewport_selected_columns=undefined, derived_viewport_selected_rows=undefined,  derived_viewport_selected_row_ids=undefined, derived_virtual_data=undefined,  derived_virtual_indices=undefined, derived_virtual_row_ids=undefined,  derived_virtual_selected_rows=undefined, derived_virtual_selected_row_ids=undefined,  loading_state=undefined, persistence=undefined, persisted_props=undefined, persistence_type=undefined, **kwargs) Copy the code

demo

data

import dash
import dash_table
import pandas as pd
import numpy as np

df = pd.DataFrame({"number":np.arange(200000),  "chinese":np.random.randint(80.100.200000),  "math":np.random.randint(80.100.200000),  "english":np.random.randint(80.100.200000),  "gem":np.random.randint(80.100.200000)}) df Copy the code

Convert to dictionary form

data = df.to_dict("records")   # Convert to dictionary form
data[:20]
Copy the code

Generated form

Demo

app = dash.Dash(__name__)

Generate data in layout
app.layout = dash_table.DataTable(
    id='table'. columns=[{"name": i, "id": i} for i in df.columns], # table attributes  data=df.to_dict('records'), Put the data into dictionary form  fixed_rows={'headers': True}, Each property is still visible when scrolling  page_size=50.# Amount of data displayed per page. When there is a scroll bar, scroll down is required. The default value is 250  style_table={'height': '400px'.'overflowY': 'auto'}, Set the height of the scroll bar and scroll page to defaults 500  style_header={  'overflow': 'hidden'. 'textOverflow': 'ellipsis'. 'maxWidth': 50. },  style_cell={  'minWidth': 30.'maxWidth': 60.'width': 45. 'textAlign': 'center' # Center the text  } )  if __name__ == '__main__':  app.run_server() Copy the code

The effect

The right side can realize scrolling; Properties are still visible while scrolling. The above code has a detailed explanation of the various parameters