How to add a searchable table as shown below into the article.

I have always wondered how to add table data into a Medium Story?

One can think of creating tables with pipes | and hyphens - as shown below

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

Recently, I discovered that Github Gist supports both “.tsv” & “.csv” file types to display information in a table.

Any .csv or .tsv file committed to a GitHub gist automatically draws an interactive table, with headers and row count.
By default, the first row is assumed to be the header row.

Please find below how the table structure looks like:

Firstly, learn how to add GitHub Gist into an article.
Link

Github Gist supports the following formats:

• CSV (Comma Separated Values)

• TSV (Tab Separated Values)

Comma Separated Values

For the CSV format, data set format rules.

• A comma separates the values.

• Each row must have the same number of columns.

• File extension must be “.CSV”

Please find below a sample dataset:

    Day,Time,Direction,Premium
    Weekday,morning rush,inbound,x 2.00
    Weekday,morning rush,outbound,x 1.00
    Weekday,daytime,inbound,x 1.50
    Weekday,daytime,outbound,x 1.50
    Weekday,evening rush,inbound,x 1.00
    Weekday,evening rush,outbound,x 2.00
    Weekday,overnight,inbound,x 0.75
    Weekday,overnight,outbound,x 0.75
    Weekend,morning rush,inbound,x 1.00
    Weekend,morning rush,outbound,x 1.00
    Weekend,daytime,inbound,x 1.00
    Weekend,daytime,outbound,x 1.00
    Weekend,evening rush,inbound,x 1.00
    Weekend,evening rush,outbound,x 1.00
    Weekend,overnight,inbound,x 1.00
    Weekend,overnight,outbound,x 1.00

Live Demonstration

Tab Separated Values

For the TSV format, data set format rules.

• A tab separates the values.

• Each row must have the same number of columns.

• File extension must be “.tsv”

Please find below a sample dataset:

    Day Time Direction Premium
    Weekday morning rush inbound x 2.00
    Weekday morning rush outbound x 1.00
    Weekday daytime inbound x 1.50
    Weekday daytime outbound x 1.50
    Weekday evening rush inbound x 1.00
    Weekday evening rush outbound x 2.00
    Weekday overnight inbound x 0.75
    Weekday overnight outbound x 0.75
    Weekend morning rush inbound x 1.00
    Weekend morning rush outbound x 1.00
    Weekend daytime inbound x 1.00
    Weekend daytime outbound x 1.00
    Weekend evening rush inbound x 1.00
    Weekend evening rush outbound x 1.00
    Weekend overnight inbound x 1.00
    Weekend overnight outbound x 1.00

Live Demonstration

Features

• Increase readability.

• Easily manageable.

• Features like search and row numbers increase productivity.

• They are shared easily with other people.

• Horizontally scrollable for more massive data sets.

Thank you for reading. I hope you like the article..!!
Follow on following channels to stay tuned on upcoming stories on C#

C# Publication, LinkedIn, Instagram, Twitter, Dev.to, Pinterest, Substack, Wix