Properties of the DataTable
Learn about Dash DataTable and the key properties of it.
In a nutshell
The Dash DataTable is a table component that allows for maximum user interactivity and customizability. This is a perfect solution for when we want a user to be able to perform actions such as selecting columns, sorting data, filtering data, and much more. The underlying mechanisms in which this occurs are all abstracted away from us, as React.js takes care of all the nuances behind changing the display of our data tables.
We can import the DataTable using the following import statement:
from dash import dash_table
As we have seen, there are many more modules we typically like to import with Dash, so the following import would make more sense:
from dash import dcc, html, Input, Output, dash_table
Properties
The Dash DataTable contains many properties. At its core, these properties allow us to modify predominantly the display and the functionality of the table of interest.
The id and data property
The first two properties to explore include that of the id and the data itself. The id property is essential when we reference it in a callback function, while the data property tells us the contents of the table. Consider the following three column dataset detailing wind direction, strength, and frequency, and notice how we pass the data in as a dictionary object into the data argument inside the DataTable:
As you can now see, the data is displayed on the webpage, but we are not able to do much with it apart from clicking on particular cells.
The column property
As we have just seen, our column names were displayed ...