PlugTable - Tailwind CSS 3 Table

PlugTable is a TailwindCSS v3 is utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. It's fast, flexible, and reliable — with zero-runtime.

Default

Name Age Address Action
Alice Johnson 28 Chicago No. 10 Main St. Delete
Bob Williams 35 Seattle No. 5 Market Ave. Delete
Eve Brown 42 San Francisco No. 3 Harbor St. Delete

Striped rows

Name Age Address Action
Alice Johnson 28 Chicago No. 10 Main St. Delete
Bob Williams 35 Seattle No. 5 Market Ave. Delete
Eve Brown 42 San Francisco No. 3 Harbor St. Delete

Hoverable rows

Name Age Address Action
Trader X 32 London No. 5 Market Ave. Buy
Trader Y 28 New York No. 15 Wall St. Sell
Trader Z 42 San Francisco No. 20 Harbor St. Buy

Striped Hoverable

Name Age Address Action
Trader X 32 London No. 5 Market Ave. Buy
Trader Y 28 New York No. 15 Wall St. Sell
Trader Z 42 San Francisco No. 20 Harbor St. Buy

highlighted tables

Name Age Address Action
Trader X 32 London No. 5 Market Ave. Buy
Trader Y 28 New York No. 15 Wall St. Sell
Trader Z 42 San Francisco No. 20 Harbor St. Buy

Bordered tables

Name Age Address Action
Trader X 32 London No. 5 Market Ave. Buy
Trader Y 28 New York No. 15 Wall St. Sell
Trader Z 42 San Francisco No. 20 Harbor St. Buy

Rounded tables

Name Age Address Action
Trader A 32 London No. 5 Market Ave. Delete
Trader B 28 New York No. 15 Wall St. Delete
Trader C 42 San Francisco No. 20 Harbor St. Delete

Table thead horizontally divided

Name Age Address Action
Trader X 32 London No. 5 Market Ave. Delete
Trader Y 28 New York No. 15 Wall St. Delete
Trader Z 42 San Francisco No. 20 Harbor St. Delete

Header in Gray color

Name Age Address Action
Trader A 32 London No. 5 Market Ave. Delete
Trader B 28 New York No. 15 Wall St. Delete
Trader C 42 San Francisco No. 20 Harbor St. Delete

With shadow

Name Age Address Action
Alice Johnson 28 Los Angeles No. 2 Avenue Delete
Bob Smith 34 Chicago No. 3 Street Delete
Eva Brown 41 Miami No. 5 Boulevard Delete

Headless

Alice Johnson 28 Los Angeles No. 2 Avenue Delete
Bob Smith 34 Chicago No. 3 Street Delete
Eva Brown 41 Miami No. 5 Boulevard Delete

Table foot

Name Age Address Action
Alice Johnson 28 Los Angeles No. 2 Avenue Delete
Bob Smith 34 Chicago No. 3 Street Delete
Footer Footer Footer Footer

Overflow

Name Title Age Email Address Action
John Brown Regional Paradigm Technician john@site.com 45 New York No. 1 Lake Park Delete
Jim Green Forward Response Developer jim@site.com 27 London No. 1 Lake Park Delete
Joe Black Product Directives Officer joe@site.com 31 Sidney No. 1 Lake Park Delete

Selection

 Name Age Address Action
John Brown 45 New York No. 1 Lake Park Delete
Jim Green 27 London No. 1 Lake Park Delete
Joe Black 31 Sidney No. 1 Lake Park Delete
Edward King 16 LA No. 1 Lake Park Delete
Jim Red 45 Melbourne No. 1 Lake Park Delete

Search input

 Name Age Address Action
John Brown 45 New York No. 1 Lake Park Delete
Jim Green 27 London No. 1 Lake Park Delete
Joe Black 31 Sidney No. 1 Lake Park Delete
Edward King 16 LA No. 1 Lake Park Delete
Jim Red 45 Melbourne No. 1 Lake Park Delete

With pagination

 Name Age Address Action
John Brown 45 New York No. 1 Lake Park Delete
Jim Green 27 London No. 1 Lake Park Delete
Joe Black 31 Sidney No. 1 Lake Park Delete
Edward King 16 LA No. 1 Lake Park Delete
Jim Red 45 Melbourne No. 1 Lake Park Delete