tarasglek
Use React DataTable for Markdown table rendering
Quick experiment to see what it would be like to render Markdown tables as rich UI, with paging, sorting, responsive display, etc. I'm using https://github.com/jbetancur/react-data-table-component which is highly customizable, see https://react-data-table-component.netlify.app/?path=/docs/getting-started-intro--docs
I've wanted to be able to do paging especially when querying massive amounts of data into the DOM.
This doesn't perform amazing for streaming, but works well for the db query case.
Not sure what I think. Maybe this could be how we render long Markdown tables? Or make this an option in prefs?
Deploying chatcraft-org with 
Cloudflare Pages
| Latest commit: |
cff3c6a
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://81e1593d.console-overthinker-dev.pages.dev |
| Branch Preview URL: | https://humphd-markdown-tables.console-overthinker-dev.pages.dev |
![cloudflare-workers-and-pages[bot] avatar](https://avatars.githubusercontent.com/in/85455?v=4 "Published by a pub.dev verified publisher"){kind=small}
I think this will also help with formatting issues (eg when content has markdown-table like elements).
I think the only change that I would make is to make row instantiation lazy..eg keep arrow table around and lazily page through it. This would be very nice for analyzing large tables like our messages table...this would also solve the problem of only sending limited context back to llm (eg only visible rows) if done right
I don't fully understand how to make this a "live" component vs. something that we render based on the contents of the Markdown. The current code is based on whatever is in the DOM--it's just changing it appears. There's no dynamic connection between the db, query, and table component.
Somehow, we'd need to tell the Markdown to render some React component and pass it a URL it can use to pull this data via the service worker or something. I need to think about this...