jsx-slack icon indicating copy to clipboard operation
jsx-slack copied to clipboard

feat: add `<Table/>`

Open ta1m1kam opened this issue 1 month ago • 1 comments

This PR introduces support for Slack’s new Table Block to the jsx-slack library. It adds three new components:

  • <Table /> – represents a Slack table block
  • <TableRow /> – defines each row
  • <TableCell /> – defines each cell

Key points

Supports columnSettings (alignment and wrapping per column). Added documentation and tests. No breaking changes — only new components and exports.

Resolves: https://github.com/yhatt/jsx-slack/issues/326

Example

<Blocks>
  <Table columnSettings={[{ align: 'left' }, { align: 'right' }]}>
    <TableRow>
      <TableCell>Item</TableCell>
      <TableCell>Price</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Widget A</TableCell>
      <TableCell>$99.99</TableCell>
    </TableRow>
  </Table>
</Blocks>

ta1m1kam avatar Nov 17 '25 12:11 ta1m1kam

While simple Slack Block Kit porting might be fine with this, jsx-slack is a library designed to increase the productivity of Slack apps by adopting familiar notations from HTML. It would be appropriate to implement this after the discussion about the design: https://github.com/yhatt/jsx-slack/issues/326#issuecomment-3541933326

yhatt avatar Nov 17 '25 14:11 yhatt