Applying classes to tables in Umbraco RichText fields

By default the TinyMce rich text editors in Umbraco will allow you to add tables but won't give you the option to apply any classes to those tables. If, for example, you are using Bootstrap, you'll want to give those tables a "table" class and maybe a "table-striped" class. 

In order to do this you'll need to make some changes to your config/tinyMceConfig.config file.

If you add this in the customConfig section the table properties will allow you to pick a style:

<config key="table_class_list">
[
  {"title": "None", "value": ""},
  {"title": "Table", "value": "table"},
  {"title": "Table Striped", "value": "table table-striped"},
]
</config>

Now you'll be able to select between a standard table and a striped table.

Using this exact same technique you can also enable other TinyMce supported table configs. For example I've added this to allow styles to be applied to rows:

<config key="table_row_class_list">
[
  {"title": "None", "value": ""},
  {"title": "Light Header", "value": "thead-light"},
  {"title": "Dark Header", "value": "thead-dark"}
]
</config>