Add styling hooks, or at least table ID for CSS targeting

[ysageev]

Love this package. I have a lot of tables that I need to display on the fly and would like this tool built out some more. In particular, styling. I'm thinking tableify() could take a styleOptions object that looks something like this:

const styleOptions = {
   tableStyle: "font-family: Helvetica, Arial, sans-serif; font-size: 11px; line-height: 20px;",
   trStyle: null,
   tdStyle: "padding: 4px 2px; text-align: left; vertical-align: top; background-color: #eaeaea;"
 }

These then get inserted into the tag with e.g. style="'" + styleOptions.tableStyle + "'" Alternatively, one could specify the table ID to target it with CSS by passing the id to tableify(). So you could write tableify("myTableID")

...and then you could have CSS that targets, like

#myTableId table {
   font-weight: bold;
   font-size: 10px;
   font-weight: bold;
}

#myTableId td {
   vertical-align: top;
   text-align: left;
   float: left;
}

[wankdanker]

Maybe even more ideal and customizable would be to take an option for each table element type that would be applied as attributes of the element. For example:

const opts = {
   table : {
     style : "font-family: Helvetica, Arial, sans-serif; font-size: 11px; line-height: 20px;",
     id: 'my-table'
   },
   tr : {
     class : "some-class"
   }
   , td : {
    style : "padding: 4px 2px; text-align: left; vertical-align: top; background-color: #eaeaea;"
   } 
} 

tableify(data, opts);

Would create something like

<table style="font-family: Helvetica, Arial, sans-serif; font-size: 11px; line-height: 20px;" id="my-table">
  <tr class="some-class">
    <td style="padding: 4px 2px; text-align: left; vertical-align: top; background-color: #eaeaea;">
   </td>
  </tr>
</table>

[ysageev]

Your layout is cleaner and more elegant. I would add only that the id is really for people who want to use a CSS file. For example, I need the inline styles because I'm generating HTML emails that contain tables. So CSS file is not possible. If I was displaying table in the page, I might prefer to use the id and target with CSS. In the second case, I wouldn't want the the inline CSS because it would override the CSS in the file. So that is why it seems preferable that the table id be a separate parameter. That way, if I want to use CSS file, I can just pass an id with opts=null. Otherwise, I can pass both or even just opts.

Case 1: inline CSS required: tableify(data, optionalTableId, opts)

Case 2: CSS file: tableify(data, requiredTableId, null)

[wankdanker]

It can be done with just one opts parameter

Case 1: inline CSS required: tableify(data, { table : { style : 'whatever' }, tr : { style : 'whatever' } });

Case 2: CSS file tableify(data, { table : { id : 'table-id' } })

This would work since we would just map the keys/attributes of opts.table, opts.tr, etc. to the same named attribute of the element.

I'd prefer not to change the function signature to handle one specific use case.

We could also just add opts.id as a shortcut for opts.table.id.

[ysageev]

Sounds good. 👍

[SebCanet]

Hi, and what about this idea? I did not see it added, unless I'm wrong? Thanks.