Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS.

  • By Samuel Liedtke
  • Last update: Dec 21, 2022
  • Comments: 1

React Table + Tailwind CSS = ❤️

Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS.

Both parts of the tutorial can be found on my blog:

  • Part 1: Build a fully featured table component step by step
  • Part 2: Style the table with Tailwind CSS

Here is how the table component looks like:

image

📖 Installation

$ npm install
$ npm start
# Load the site at http://127.0.0.1:3000

🤝 Contributing

Contributions, issues and feature requests are welcome!

⭐️ Support

Give a ⭐️ if this project helped you!

Github

https://github.com/jimmybutton/react-tailwind-table

Comments(1)

  • 1

    feat: add responsive classes for different device type

    It would be great if this project also included the tailwind responsive classes sm: md: lg:. etc. So that the table is usable across device types.

    I am currently working to add these myself to my project, happy to raise a PR / discussion topic with some suggestions.

    WIP: image Project PR

    Key considerations:

    • Overflow handling for x-scroll
    • Global filter handling (good ux to avoid overwhelming input / dropdowns)

Popular Tag

Related