DataTablesJS Component

[hasansezertasan]

Hi,

I discovered Starlette Admin in these last months and started to use in production. It uses DataTables/DataTables for tables which is quite powerfull.

My proposal is basically this: a component/field to use DataTables within FastUI.

[samuelcolvin]

Maybe, but what specifically do you need from DataTablesJS?

[hasansezertasan]

Many of my applications are data-first applications with many tables that presented to the users. Plain table approach is not enough for good user experience but DataTablesJS is.

Here are some examples: DataTables example - Zero configuration, DataTables example - Ajax sourced data

It basically creates a table with pagination, search and sorting features. It has a lot of customization options and its free. The best part is that we can easily seed the table with JSON data. We can set pagination endpoints in it and ta da ✨

Long story short: It's usefull and does a lot of magic based on definitions. I believe I "specifically need" another (a better) option to plain tables.

[paddymul]

FWIW as developer of a related project I have a bunch of opinions, and so do datatable projects in general.

To the point where I think FastUI including a built in datatable component is way out of scope for the aims of this project. I think a simple HTML/bootstrap based table could work as a builtin for FastUI. Just take a list of strings for headers, and either a 2d array for the table, or maybe a list of dicts.

If I were recommending a generic datatable, I would look at IPyAggrid, which closely mimics the API of Ag-Grid in a jupyter widget. My own project, buckaroo is more opinionated, built around enabling summary stats and EDA for dataframes.

Once FastUI figures out extensibility I will make a component for it based on buckaroo. Building one for jquery datatables, or whatever other library would be nice additions.

There are a lot of projects in this space. I made a whole explainer page about related projects in the buckaroo docs. https://buckaroo-data.readthedocs.io/en/latest/articles/related_projects.html

After doing some digging, it seems that starlette admin is popular in the FastAPI ecosystem, and that uses DataTables.js So there is some familiarity with the package in this ecosystem. Still, I'd say make it a 3rd party package.

[paddymul]

@samuelcolvin Maybe some guidance for users about what should and should not be in the core FastUI package, along with your reasoning would be helpful.

[hasansezertasan]

To the point where I think FastUI including a built in datatable component is way out of scope for the aims of this project.

You sound right but my situation here is different. I'm not a react person. I write some Vanilla JS. Let's say that I really want to use DataTablesJS, I tried to implement it in FastUI just looking at the example here: DataTables example - Ajax sourced data. I can't figure out how to make it work.

That's why I opened this issue because in the end we were gonna talk about this: Using other great JavaScript Libraries with FastUI. I can think of some other libraries:

• sparksuite/simplemde-markdown-editor
• TinyMCE
• ckeditor/ckeditor5
• josdejong/jsoneditor
• Plotly, bokeh or similar packages that discussed in #75
• ...

@samuelcolvin Maybe some guidance for users about what should and should not be in the core FastUI package, along with your reasoning would be helpful.

I believe a contribution guide could be awesome.

After doing some digging, it seems that starlette admin is popular in the FastAPI ecosystem, and that uses DataTables.js So there is some familiarity with the package in this ecosystem. Still, I'd say make it a 3rd party package.

Since FastUI is quite new package, I couldn't find a 3rd party package that can inspire me to build such a thing. I believe a guidance that shows how to do it could also work for me.

[paddymul]

Custom components which will be necessary for third party components are discussed here: https://github.com/pydantic/FastUI/issues/19

When I was trying to learn FastUI and get a feel for it, I created a PR that integrated my own component into core FastUI, expecting the PR would never be merged. It still gave me a feel for many of the pieces and code that will be needed for a custom component. You could take a look here https://github.com/pydantic/FastUI/pull/73

[hasansezertasan]

@paddymul Thank you for your answer. #88 now adds Custom Components support but I'm not sure how we will be able to start a component that initialized via JavaScript snippet.

Edit: I just saw #102. I believe the same solution will solve this one too.