Slack webhook html table
WebhooksSlack ApiSlackWebhooks Problem Overview
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>
Webhooks Solutions
Solution 1 - Webhooks
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.
Solution 2 - Webhooks
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.
Solution 3 - Webhooks
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": "[email protected]"
},
{
"type": "plain_text",
"text": "Anne Polin",
"emoji": true
},
{
"type": "mrkdwn",
"text": "[email protected]"
}
]
}
]
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": "[email protected]"
},
{
"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:
Solution 4 - Webhooks
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+'```',
}
Solution 5 - Webhooks
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.
Solution 6 - Webhooks
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
Solution 7 - Webhooks
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
Solution 8 - Webhooks
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