A way to create HTML tables. #5154

Brahvim · 2021-04-02T16:42:50Z

welcome · 2021-04-02T16:42:51Z

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

Prateek93a · 2021-04-06T11:35:34Z

@Brahvim This might be helpful : https://p5js.org/reference/#/p5.Table

Brahvim · 2021-04-06T12:59:36Z

@Brahvim This might be helpful : https://p5js.org/reference/#/p5.Table

Wait, but does it work with HTML? Because what I requested was for it to work like a DOM element.

The reference page itself does not mention that it is a DOM element anywhere.
(Unless I misread!)

Thank you for the information though! :D!

Prateek93a · 2021-04-06T13:16:13Z

Oh ok, I misread your request and thought you were asking for tables feature in p5 sketch. Thanks for the clarification!

outofambit · 2021-04-25T20:08:25Z

Hey @Brahvim, thanks for filing this request! Did you have any thoughts on how would this new feature help increase access to p5.js? This seems like an interesting idea (and the DOM module is one of my favorite parts of p5.js!) but I'm having trouble connecting this idea to our focus on access. What do you think?

Brahvim · 2021-04-26T02:07:52Z

Hey @Brahvim, thanks for filing this request! Did you have any thoughts on how would this new feature help increase access to p5.js? This seems like an interesting idea (and the DOM module is one of my favorite parts of p5.js!) but I'm having trouble connecting this idea to our focus on access. What do you think?

Uh-oh!~ I am sorry, I don't think it does so in any way. Thank you for addressing that!

micuat · 2021-04-29T14:02:22Z

@outofambit just a thought but can this be helpful for listing descriptions for screen readers? In fact the current implementation of describeElement generates a table in a naive way, but this could be wrapped by createTable if that is implemented as part of dom library
https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js#L174

Brahvim · 2021-04-30T01:40:18Z

@outofambit just a thought but can this be helpful for listing descriptions for screen readers? In fact the current implementation of describeElement generates a table in a naive way, but this could be wrapped by createTable if that is implemented as part of dom library
https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js#L174

Good idea, thank you!

Brahvim · 2021-05-02T08:22:06Z

I recently found out about the p5 saveTable() method. Maybe it is possible to generate an HTML table with it and add that to the HTML file? I think that is possible too. Might not need to keep this issue open if that is possible to do.

micuat · 2021-05-02T09:13:09Z

@Brahvim it's close but not exactly what you want - it's for outputting a file instead of DOM

p5.js/src/io/files.js

Lines 1747 to 1782 in 374acfb

    
           // otherwise, make HTML 
        
           pWriter.print('<html>'); 
        
           pWriter.print('<head>'); 
        
           let str = '  <meta http-equiv="content-type" content'; 
        
           str += '="text/html;charset=utf-8" />'; 
        
           pWriter.print(str); 
        
           pWriter.print('</head>'); 
        
           pWriter.print('<body>'); 
        
           pWriter.print('  <table>'); 
        
           // make header if it has values 
        
           if (header[0] !== '0') { 
        
             pWriter.print('    <tr>'); 
        
             for (let k = 0; k < header.length; k++) { 
        
               const e = escapeHelper(header[k]); 
        
               pWriter.print(`      <td>${e}`); 
        
               pWriter.print('      </td>'); 
        
             } 
        
             pWriter.print('    </tr>'); 
        
           } 
        
           // make rows 
        
           for (let row = 0; row < table.rows.length; row++) { 
        
             pWriter.print('    <tr>'); 
        
             for (let col = 0; col < table.columns.length; col++) { 
        
               const entry = table.rows[row].getString(col); 
        
               const htmlEntry = escapeHelper(entry); 
        
               pWriter.print(`      <td>${htmlEntry}`); 
        
               pWriter.print('      </td>'); 
        
             } 
        
             pWriter.print('    </tr>'); 
        
           } 
        
           pWriter.print('  </table>'); 
        
           pWriter.print('</body>'); 
        
           pWriter.print('</html>');

Brahvim · 2021-05-02T10:31:51Z

@micuat Yes, I know that, and that's what I said - since this generates markup for a table, why not find/implement a way to insert that code into the index.html file? Given an id attribute, it'll then be very easy to apply style information, etc.

micuat · 2021-05-02T10:42:05Z

@Brahvim I get your point but it sounds a bit like hotglue / adhoc solution to me. If this is going to be implemented, I think it's fair to make a new "class" like TableElement to manage it because the existing solutions for describeElement and saveTable are specific to output a table and, for example, you cannot simply add a row/column/cell.

There is also a problem with p5.createElement("td") that the performance is not optimal for a big table (the OP says >2000, but I see huge performance drop even with ~200)
https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723/11

But again, we need to justify if this is needed from the perspective of accessibility (otherwise we end up adding every possible feature to p5.js). You can always use other libraries to generate a table.

Brahvim · 2021-05-02T14:16:48Z

@Brahvim I get your point but it sounds a bit like hotglue / adhoc solution to me. If this is going to be implemented, I think it's fair to make a new "class" like TableElement to manage it because the existing solutions for describeElement and saveTable are specific to output a table and, for example, you cannot simply add a row/column/cell.

There is also a problem with p5.createElement("td") that the performance is not optimal for a big table (the OP says >2000, but I see huge performance drop even with ~200)
https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723/11

But again, we need to justify if this is needed from the perspective of accessibility (otherwise we end up adding every possible feature to p5.js). You can always use other libraries to generate a table.

I see. Should probably leave it up to the developers of p5 now...?

Mamatha1718 · 2025-04-14T08:22:13Z

Hi @Qianqianye , @Brahvim , @micuat , @outofambit , @Prateek93a , Is is this issue still open i would like to work on this issue.
Thank you in advance!

Brahvim · 2025-04-14T08:42:55Z

Since it ended up seeming like a performance issue to do this... I don't think it's a good idea to add something like this to p5. Feel free to try though :)!

If your solution fits p5's style of abstractions and offers a lot of convenience, it'd be great to have :D!

In my opinion it is still better to add elements using the document object directly and have a good understanding of Web APIs. But if you're up for the challenge of making something that suits p5's style, sure do take it on :)!

Mamatha1718 · 2025-04-15T11:21:44Z

Hi @Brahvim ,
Thank you for your detailed response and for clarifying the challenges associated with implementing this feature. I appreciate the insights on performance concerns, alignment with p5.js's philosophy, and the existing alternatives like createElement() or vanilla JavaScript.

I understand that this feature might not be a priority at the moment, but I’m still eager to contribute to the p5.js community and learn more about its development process. Are there any other open issues or areas for new contributors where I could focus my efforts? I’m particularly interested in learning more about Embedding Methods performance optimization, or creating new features that align with p5.js's goals.

Looking forward to your suggestions!
Thank You in Advance

Brahvim added the Feature Request label Apr 2, 2021

Qianqianye added the Area:DOM label Jul 13, 2022

Qianqianye added the p5.js 2.0 label Jun 5, 2024

Qianqianye added this to p5.js 2.x 🌱🌳 Jun 10, 2024

Qianqianye moved this to Proposal in p5.js 2.x 🌱🌳 Jun 11, 2024

Qianqianye self-assigned this Jun 18, 2024

Qianqianye moved this from Proposal to Out of Scope in p5.js 2.x 🌱🌳 Sep 11, 2024

ksen0 mentioned this issue Apr 17, 2025

[p5.js 2.0 RFC Proposal]: Pruning #7090

Closed

21 tasks

ksen0 moved this from Out of Scope to Open for Discussion in p5.js 2.x 🌱🌳 Apr 17, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

A way to create HTML tables. #5154

A way to create HTML tables. #5154

Brahvim commented Apr 2, 2021 •

edited

Loading

welcome bot commented Apr 2, 2021

Prateek93a commented Apr 6, 2021

Brahvim commented Apr 6, 2021

Prateek93a commented Apr 6, 2021

outofambit commented Apr 25, 2021

Brahvim commented Apr 26, 2021 •

edited

Loading

micuat commented Apr 29, 2021

Brahvim commented Apr 30, 2021

Brahvim commented May 2, 2021

micuat commented May 2, 2021 •

edited

Loading

Brahvim commented May 2, 2021 •

edited

Loading

micuat commented May 2, 2021

Brahvim commented May 2, 2021

Mamatha1718 commented Apr 14, 2025

Brahvim commented Apr 14, 2025

Mamatha1718 commented Apr 15, 2025 •

edited

Loading

A way to create HTML tables. #5154

A way to create HTML tables. #5154

Comments

Brahvim commented Apr 2, 2021 • edited Loading

How would this new feature help increase access to p5.js?

Most appropriate sub-area of p5.js?

New feature details:

welcome bot commented Apr 2, 2021

Prateek93a commented Apr 6, 2021

Brahvim commented Apr 6, 2021

Prateek93a commented Apr 6, 2021

outofambit commented Apr 25, 2021

Brahvim commented Apr 26, 2021 • edited Loading

micuat commented Apr 29, 2021

Brahvim commented Apr 30, 2021

Brahvim commented May 2, 2021

micuat commented May 2, 2021 • edited Loading

Brahvim commented May 2, 2021 • edited Loading

micuat commented May 2, 2021

Brahvim commented May 2, 2021

Mamatha1718 commented Apr 14, 2025

Brahvim commented Apr 14, 2025

Mamatha1718 commented Apr 15, 2025 • edited Loading

Brahvim commented Apr 2, 2021 •

edited

Loading

Brahvim commented Apr 26, 2021 •

edited

Loading

micuat commented May 2, 2021 •

edited

Loading

Brahvim commented May 2, 2021 •

edited

Loading

Mamatha1718 commented Apr 15, 2025 •

edited

Loading