Slack webhook html table

Question

I have a HTML table that I am trying to post to Slack via webhook.

Is there a way to post the HTML table to Slack?

Here is the HTML code:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Tables</title>
   </head>
   <body>
      <table border="1">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
   </body>
</html>

score 56 · Answer 1 · edited Jan 31 '18 at 06:58

56

I have opened a ticket to Slack support asking if Slack's Incoming Webhook message supports table of any form (HTML or Markdown).

The official answer is that Slack messages do not support tables.

They suggest to generate a table and post it as an image.

They also said that they will add it to their backlog.

edited Jan 31 '18 at 06:58

Yassine ElBadaoui

450
7
16

answered Aug 23 '16 at 13:45

Sahar Menashe

1,945
2
18
17

5

Thanks. I ended up sending emails to slack channel to get the formatted table. – Punter Vicky Aug 23 '16 at 14:16
I'd like to re-open the same discussion here. What is the best way to backend render table? @PunterVicky did you find a reliable solution? – CM. Nov 24 '17 at 18:57
@cmertayak I didn’t try it recently. But I had sent an email with formatted html when I posted this question as I didn’t find a reliable solution – Punter Vicky Nov 27 '17 at 04:12
Thanks @PunterVicky . If I find a reliable solution I will write a reply. – CM. Nov 27 '17 at 07:52
9

Posting tables as images is a poor solution. They hamper assistive technology (e.g. blind users won't be able to read them) and cannot be searched. I wish Slack would just support Markdown formatting, like it already partially does, and like many other online tools, including GitHub and StackOverflow. – Michael Scheper May 19 '20 at 19:00
4

This is pretty embarrassing – O'Rooney Jun 30 '21 at 23:50
Wow, this answer is more than 5 years old and still no tables :'( – Sam Oct 11 '21 at 16:32
2

Still in backlog I guess – Kozmo May 05 '22 at 12:04

score 40 · Accepted Answer · edited Nov 12 '18 at 14:41

40

No, I don't believe there's any way to draw a table in a Slack message.

Here are other available options for formatting Slack messages: https://api.slack.com/docs/formatting.

edited Nov 12 '18 at 14:41

Uri

25,622
10
45
72

answered May 06 '16 at 21:02

user94559

59,196
6
103
103

score 28 · Answer 3 · answered Apr 17 '19 at 19:05

You can now do simple two column tables in slack using the "fields" layout block.

You can do two column table:

[
   {
        "type": "section",
        "fields": [
            {
                "type": "mrkdwn",
                "text": "*Name*"
            },
            {
                "type": "mrkdwn",
                "text": "*Email*"
            },
            {
                "type": "plain_text",
                "text": "Jeff Henderson",
                "emoji": true
            },
            {
                "type": "mrkdwn",
                "text": "jh@geemail.com"
            },
            {
                "type": "plain_text",
                "text": "Anne Polin",
                "emoji": true
            },
            {
                "type": "mrkdwn",
                "text": "ap@geemail.com"
            }

        ]
    }
]

Giving you:

Or go field style:

[
    {
        "type": "section",
        "fields": [
            {
                "type": "plain_text",
                "text": "Name",
                "emoji": true
            },
            {
                "type": "mrkdwn",
                "text": "*Jeff Henderson*"
            },
            {
                "type": "plain_text",
                "text": "Email",
                "emoji": true
            },
            {
                "type": "mrkdwn",
                "text": "jh@geemail.com"
            },
            {
                "type": "plain_text",
                "text": "Mobile Phone",
                "emoji": true
            },
            {
                "type": "mrkdwn",
                "text": "0451000000"
            },
            {
                "type": "plain_text",
                "text": "Work Phone",
                "emoji": true
            },
            {
                "type": "mrkdwn",
                "text": "94550000"
            }

        ]
    }
]

Will yield:

This has the unfortunate limitation of allowing only 10 elements in the fields array. Just learned in the hard way but it also says so here: https://api.slack.com/reference/messaging/blocks — JKJ, May 06 '19 at 15:21
Yes that is correct and good to point out. Only way around is to "page" into multiple messages. — Avner, May 15 '19 at 00:48
This helps but I faced issues with `fields` since it allows a max of 10 elements — akskap, Jun 02 '19 at 20:42
You also can chunk elements to sections by 10 and send it in one message(consider blocks limitation if any). Though it will have spacing. Think it even more human readable — frenzy, Jun 25 '19 at 11:24
People dealing with the limitation of 10 elements, please see my answer below. — gradLife, Oct 23 '19 at 22:14
These seems to be working fine for message response in channel, but not on threadTs — BEWARB, Jan 31 '23 at 14:42

score 23 · Answer 4 · answered Jun 05 '18 at 18:03

23

Not a html table specifically, but you may use a package like console.table to print your table's data into a string variable. Then use triple backticks to add your table in your slack message's text field. For example:

const cTable = require('console.table');
const table = cTable.getTable([
  {
    name: 'foo',
    age: 10
  }, {
    name: 'bar',
    age: 20
  }
]);

and then as part of your slack message's attachment:

const attachmentList = {
        "title": "YOUR TITLE",
        "text": 'HERE IS YOUR TABLE: : \n ```'+table+'```',
    }

answered Jun 05 '18 at 18:03

Nima

265
3
10

2

Nice. I like this solution. – faboulaws Aug 28 '19 at 18:02
If I was the OP, I would definitely accept this as the answer – Christiaan Westerbeek Mar 29 '23 at 15:19
And you, my friend, are a true hero! – learn_more Jul 03 '23 at 03:35

score 17 · Answer 5 · answered May 19 '20 at 19:38

Unfortunately, it seems tables are a Markdown standard that Slack does not currently support.

A crude workaround would be to use box-drawing characters within a literal block of text (preceded and followed by three backticks/inverted commas, i.e. ```, on separate lines).

I occasionally use tablesgenerator.com to generate them on the fly.

╔══════╤══════╤══════════╗
║ Dog  │ Cat  │ Bird     ║
╠══════╪══════╪══════════╣
║ Woof │ Meow │ Tweet    ║
╟──────┼──────┼──────────╢
║ Fur  │ Fur  │ Feathers ║
╚══════╧══════╧══════════╝

They're certainly not pretty, but unlike the pasted images that Slack apparently recommends, their content can be searched, and, at least for some of my colleagues, work somewhat with assistive technology.

Is tablesgenerator.com safe? Do you know if they store the data on their servers? — Borderless.Nomad, Dec 04 '20 at 12:07
@Borderless.Nomad: I have no idea; I've never used it for anything sensitive enough for me to worry about that. Some editors also have functionality for this, though, e.g. the https://www.vim.org/scripts/script.php?script_id=40 plug-in for vim. I haven't used that plug-in, though, because I've always just copied and pasted the relevant box drawing characters manually, whenever tablesgenerator.com didn't produce the output I want. So if it's for a one-off task, maybe you could do that, too. — Michael Scheper, Mar 18 '21 at 17:40

score 4 · Answer 6 · answered Oct 23 '19 at 22:13

Slack API limits blocks to only 10 elements but what you can do is to add one long text with breaks to make it look like a table. Here is an example

[
                    {
                        "type": "section",
                        "text": {
                            "text": "Conference Standings:",
                            "type": "mrkdwn"
                        },
                        "fields": [
                            {
                                "type": "mrkdwn",
                                "text": "*Team*"
                            },
                            {
                                "type": "mrkdwn",
                                "text": "*W-L*"
                            },
                            {
                                "type": "plain_text",
                                "text": "Team1\nTeam2\nTeam3\nTeam4\nTeam5\n"
                            },
                            {
                                "type": "plain_text",
                                "text": "1\n2\n3\n4\n5\n"
                            }
                        ]
                    }
                ]

Here is the result

This won't help if you change the screen size. – Adithya Ranganath May 20 '20 at 16:35 — Adithya Ranganath, May 20 '20 at 16:35
This works but won't get past 2000 characters – E_K Jun 28 '21 at 11:50 — E_K, Jun 28 '21 at 11:50

Beolap · Answer 7 · 2020-11-25T16:23:58.117

This is sort of a mixture of different answers given here. I can also only suggest sending a formatted string as it supports more than two columns.

However, the thing is that Slack does not give every character an equal amount of space, as code would usually do. This means that the rows won't be aligned properly. Therefore, I suggest using code blocks, which require ticks (```).

Python example using formatted strings:

monthly_numbers_str = f"```"
monthly_numbers_str += f"{"Month".ljust(7)}{"Users".ljust(7)}\n"

monthly_numbers_str += f"{"Jan".ljust(7)}{"15".ljust(7)}\n"
monthly_numbers_str += f"{"Feb".ljust(7)}{"19".ljust(7)}\n"
monthly_numbers_str += f"{"Mar".ljust(7)}{"30".ljust(7)}\n"
monthly_numbers_str += f"```"

Output (as code):

Month  Users
Jan    15
Feb    19
Mar    30

score 2 · Answer 8 · answered Dec 19 '19 at 19:23

2

I started using old school Console app tables in my slackbot.

See examples here: https://github.com/Robert-McGinley/TableParser

Just send the raw text inside the ``` 3 tick marks to the SlackAPI

answered Dec 19 '19 at 19:23

rideon88

298
2
12

score 1 · Answer 9 · answered Sep 12 '22 at 17:59

A similar answer using the code block, in case you wish to use hyperlinks in markdown:

first_row = ["asdasfasf", "12341433124"]
second_row = ["asda", "123124"]

mes = "--------------\n"
for fr in first_row:
  mes += ("[`"+fr.center(20,".")+"`](https://www.google.com)")
mes += "\n\n"
for sr in second_row:
  mes += ("[`"+sr.center(20,".")+"`](https://www.google.com)")
mes+="\n---------------"

data = {
  "title": "Example message",
  "message": mes,
}

headers = {'Content-type': 'application/json', 'Accept': 'text/plain'}
r = requests.post(uri, data=json.dumps(data), headers=headers)

The output shall look more or less like this

score 0 · Answer 10 · answered May 04 '23 at 09:03

yeah, slack webhook doesn't support html, css. @slack/web-api is more flexible for that case. if you want to format your columns, you can use the below method for Node/TypeScript.

function tableToString(headers: string[], rows: string[][]): string {
  const columnWidths = headers.map((header, index) => {
    const column = [header, ...rows.map((row) => row[index])];
    return column.reduce((maxWidth, value) => Math.max(maxWidth, value.length), 0);
  });

  const separator = columnWidths.map((width) => '-'.repeat(width)).join('-+-');

  const headerRow = headers
    .map((header, index) => header.padEnd(columnWidths[index], ' '))
    .join(' | ');

  const bodyRows = rows.map((row) =>
    row
      .map((value, index) => value.padEnd(columnWidths[index], ' '))
      .join(' | ')
  );

  return [headerRow, separator, ...bodyRows].join('\n');
}

Slack webhook html table

10 Answers10