CSV / Pandas

[Ziphron80]

Background:
So I'm using Flet to create an app that a user can enter data, which is fed into a CSV file. I have the data entry section (with TextField and Dropdown controls) grouped into one Tab and then in another Tab, I have a Container that displays the data from the CSV file, using Pandas.

Problem:
While the data shows under its column headers in a neatly aligned fashion in my VS Code console (via Pandas) I can't seem to get the same alignment when I show the data in Flet (Pandas dataframe is set to a variable which is then assigned to the Content parameter within a Container.

Is there anything within Flet that can affect the alignment of the actual data or is that something that more to do with Pandas?

Thank You!

Eric

[FeodorFitsner]

Hi Eric,

Could you drop a screenshot of the layout you are trying to make?

[Ziphron80]

Hi Feodor,

Thank you so much for responding....the first screenshot is of the console output from Pandas while the second is the same output in Flet.

[Ziphron80]

I did also use the tabulate extension for some formatting...which removed the indices that Pandas adds as well as some other formatting but still having issues with the headers and related content from properly aligning.

[FeodorFitsner]

Alright, I see two ways to make it pretty:

1. Using monospace font - see an example using Roboto Slab font: https://github.com/flet-dev/examples/blob/main/python/controls/text/variable-weight-font.py

2. Using DataTable control - which is not yet documented and not fully complete, but usable enough for your case: https://github.com/flet-dev/examples/blob/main/python/controls/datatable/datatable-no-source.py

Let me know what worked.

[Ziphron80]

So first, I tried the font format option:

You can see from the video that the relational positioning is still the same, regardless of the font and font weight. I wanted to try this option first since it seemed to be the quickest and easiest option. I DID pass the variable that contains the Pandas DataFrame to the 'SliderText' Control via 'value=' parameter, without putting it inside a Container first...thinking it might fare better without any previous formatting.

Jumbo.Coater.-.Input.Tag.Consumption.Log.BETA.2022-12-05.22-13-57.mp4

I will keep this for now as a feature to allow the User to customize the look, but I will try the other option with using the DataTable and will update soon! =)

[FeodorFitsner]

Oh, right, the tab!

OK, try DataTable - it's been just documented: https://flet.dev/docs/controls/datatable

[Ziphron80]

Awesome! Will make use of that...thank you! =)

[Ziphron80]

So...so far, so good...I do have one question though.

Is there a way I can make the DataTable grow (i.e. iterate with a loop over the imported CSV data)?

For now, I've been entering data manually into the Row>DataCell for testing and understanding how to use it.

I see I can use the DropDown controls in the DataTable as a form of user entry as well, but it would still need to grow as data is entered...but that would also take a way the ability to leave the DropDowns and TextFields with populated data, while only changing what is necessary. (speeds up data entry)

[DavMelchi]

@FeodorFitsner it would be great if we can have an example by populating the datatable from a datasource like pandas dataframe or Json

[FeodorFitsner]

This will be added, sure. Right now DataTable is just a bare 1-to-1 implementation of Flutter DataTable without "datasource" and paging support.

[Ziphron80]

Thank you Feodor...I really appreciate your work on this project. I really like how it's structured and produces a beautiful and scalable solutions. I'm relatively new to Python (a few years) and I find it easy to grasp. Thank you Sir!!

[clstaudt]

@FeodorFitsner Thanks for adding DataTable. Should I start building my own function to_datatable(data: pandas.DataFrame) -> flet.DataTable or is this coming soon?

[FeodorFitsner]

You could start doing that. I might reuse some of your results later. There are other issues such as re-binding data to the list, i.e. detecting new/changed/deleted items for effectiveness.