`<Table />` component

[ta1m1kam]

Hi, thank you for creating this great library!

I’d like to request support for the new table block recently introduced in Slack Block Kit.

It seems that jsx-slack does not currently support this block type, and it would be very helpful for displaying structured data or tabular information directly in messages.

Use case: I’d like to create Slack messages that include tabular data using JSX syntax, for example:

<Block>
  <Table>
    <TableRow>
      <TableCell>Header 1</TableCell>
      <TableCell>Header 2</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Value A</TableCell>
      <TableCell>Value B</TableCell>
    </TableRow>
  </Table>
</Block>

[yhatt]

Thanks for your suggestion. Let's start the design of a table block support for jsx-slack.

Design

jsx-slack emphasizes reducing cognitive load by being compatible with HTML. There is no problem with having components like <Table>, <TableRow>, and <TableCell>, but it would be good if you could write it as follows when necessary:

<Block>
  <table id="blockId">
    <tr>
      <th align="right">Header 1</th>
      <th wrap={true}>Header 2</th>
    </tr>
    <tr>
      <td align="right">Value A</td>
      <td wrap={true}>Value B</td>
    </tr>
  </table>
</Block>

Concerns

• Slack Block Kit only allows raw_text or rich_text type as the content of cell.
  • rich_text support in jsx-slack is pending due to requiring fundamental improvements. (#299)
  • During the limited support for only raw_text, decorations with HTML tags cannot be used.
    • This may cause confusion for users accustomed to writing existing messages.
• <tbody> is optional. If wrapped the table contents with <tbody>, jsx-slack will be just ignored it.
• <th> should emphasize the content as the bold text, by using rich_text type.
• align attribute should be supported by <tr>, <th>, and <td>.
• Note that wrap attribute is not a part of HTML.
  • nowrap attribute had no longer been supported in HTML5 so it's better to avoid using.
• In Slack Block Kit, settings about the alignment of cells and text wrap only can set per columns.
  • For now, it's better to adopt the last setting of align and wrap in the column as the setting for the current column.
  • Since HTML allows more flexible settings, it can be kind of confusing for users.