slack에서 markdown table 그리는 방법

Posted by negabaro kim on Sunday, February 7, 2021 Tags: slack   2 minute read

slack에서 markdown기능을 서포트하지 않아서 우리가 아는 markdown table을 그릴 수 없다.

이 포스트에서는 slack에서 markdown table과 비슷한 table을 구현하는 방법에 대해 알아보자.

방법1

테이블을 캡쳐해서 파일로 업로드한다.(귀찮으므로 피하고 싶다.)

방법2

슬랙에서 제공하는 fileds를 이용해 구현하는 방법이 있다.

fileds를 사용하면 border가 없고 2 column테이블 밖에 만들 수 없다는 문제가 있다. (그 이상 만들면 레이아웃이 깨짐)

방법3

sample과 같이 문자(monospace font)로 테이블을 만들어 본다.

markdown table과 가장 근접한 효과를 얻을 수 있다.

방법3이 가장 근접한 솔루션인데

방법3이 가장 근접한 솔루션인데 일일이 테이블 텍스트를 만드는게 귀찮다.

먼저 변수를 넣으려면

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"```"

이런식으로 해야한다. 행이나 열이 늘어갈때 유연하게 대응하기 어렵다.

monospace font를 자동으로 생성해주는 javaascript OSS는 없을까?

있었다. console-tablemarkdown-table가 있었는데 markdown-table이 조금더 옵션이 많고 테이블과 비슷했기에 markdown-table을 사용했다.

markdown-table

npm i markdown-table으로 설치후

아래와 같이 간단히 사용이 가능했다.

import table from "markdown-table";

const t = table([
  ["Stock", "Price", "Change", "latest date"],
  [sym, price, changePer, date]
]);

const t2 = "```" + t + "```";

t2를 slack메시지 전송시 blocks에 담아주기만 하면 된다.

image