DataFrames
If your application needs to present data as a table, it should use a DataFrame. DataFrames provide a simple way to present data in a grid format, require only a couple of lines of code to set up, and provide an interface that users expect from modern data applications.


“DataFrame” has multiple meanings
Writer Framework has two objects with the name DataFrame:- UI DataFrame: In Writer Framework’s UI, “DataFrame” refers to a user interface component that displays data in rows and columns in a way similar to a spreadsheet or SQL table.
- Code Dataframe: In code that you write for a Writer Framework application,
DataFrame
refers to a data structure that stores data in rows and columns in a way similar to a spreadsheet or SQL table.
DataFrame
data structure in your code and then bind it to a UI Dataframe.
Displaying a static DataFrame
A static DataFrame is one whose content does not change. The user can change its sort order, but the data within the DataFrame remains constant.1
Create a DataFrame data structure
Writer Framework supports both pandas and Polars The call to
DataFrame
data structures. Create a DataFrame
, assign its value to a variable, then assign make that variable a value in the state
dictionary:wf.init_state()
adds the DataFrame
to the application’s state
variable as the value of the mydf
key.2
Add a DataFrame component to the UI and bind it to the DataFrame data structure
Add a DataFrame UI component to the user interface, then set its Data property to 
@{
dataframe_key}
, where dataframe_key is the state
variable key whose value refers to the DataFrame
data structure.In the case of this example, mydf
is the state
variable key referring to the DataFrame
, so set the Data property to @{mydf}
.
Displaying an editable DataFrame
A editable DataFrame is one whose content can change. Like static DataFrames, editable DataFrames use the DataFrame UI component. Unlike static tables, the DataFrame UI component is bound to an instance ofEditableDataFrame
, a class provided by the Writer library. Changes to a EditableDataFrame
object will be immediately reflected in the DataFrame UI component that it is bound to.
1
Create an EditableDataFrame data structure
An The call to
EditableDataFrame
object can be instantiated from any of the following:- A pandas
DataFrame
- A Polars
DataFrame
- A list of dictionaries
wf.init_state()
adds the DataFrame
to the application’s state
variable as the value of the mydf
key.2
Add a DataFrame component to the UI and bind it to the DataFrame data structure
Add a DataFrame component to the user interface, then set its Data property to 
@{
dataframe_key}
, where dataframe_key is the state
variable key whose value refers to the DataFrame
data structure.In the case of this example, mydf
is the state
variable key referring to the DataFrame
, so set the Data property to @{mydf}
.
Updating an editable DataFrame
Editable DataFrames are updated by updating theEditableDataFrame
object they are bound to, which is done using EditableDataFrame
’s methods.
record_add
: Add a new row
record_add()
adds a new row to an EditableDataFrame
. It takes a dictionary with the following structure…
new_row
is a dictionary containing the data for the row to be added.
In the code example above, you would add a new row to the DataFrame with the following code:
record
: Read the contents of a row
record()
returns a row in an EditableDataFrame
. It takes an integer specifying the index of the row.
In the code example above, you would retrieve the record at row 1 with the following code:
record_update
: Change an existing row
record_update()
replaces an existing row in an EditableDataFrame
with a new one. It takes a dictionary with the following structure…
index
is an integer specifying which row should be updated and row_to_update
is a dictionary containing the updated row data.
In the code example above, you would update the row at index 0 with the following code:
record_remove
: Delete an existing row
record_remove()
removes an existing row from an EditableDataFrame
. It takes a dictionary with the following structure…
index
is an integer specifying which row should be deleted.
In the code example above, you would delete the row at index 2 with the following code:
Enabling additional features
The DataFrame component has these “always-on” features:- Sorting: Clicking a column header sorts the entire DataFrame based on that column’s values. The first click sorts that DataFrame in ascending order, a second click changes it to descending order, and a third click restores the DataFrame to its original sort order.
- Column resizing: Click and drag the dividing line on the right edge of a column header to adjust its width.
Search field
To enable the Search field, select the DataFrame, open the Component settings panel, and set Enable search to yes.
Download button
To enable the Download button, select the DataFrame, open the Component settings panel, and set Enable download to yes.