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

Related tags

React react-tailwind-table
Overview

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!

You might also like...

A react native component that lets you build a dynamic expandable chips list.

A react native component that lets you build a dynamic expandable chips list.

React Native Expandable Chips List A react native component that lets you build a dynamic expandable chips list. Installation Run npm install react-na

Sep 23, 2022

Shows how React components and Redux to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications

Shows how React components and Redux to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications

This simple shopping cart prototype shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications.

Feb 1, 2022

Next-gen, highly customizable content editor for the browser - based on React and Redux and written in TypeScript. WYSIWYG on steroids.

ReactPage ReactPage is a smart, extensible and modern editor ("WYSIWYG") for the web written in React. If you are fed up with the limitations of conte

Jan 6, 2023

React component library for displaying code samples with syntax highlighting!!

react-code-samples usage example: import {} from 'react-code-samples'; import 'highlight.js/styles/default.css'; // or use another highlight js style

Jan 3, 2022

A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and s

Jun 30, 2022

Further split the React Native code based on Metro build to improve performance, providing `Dll` and `Dynamic Imports` features

Further split the React Native code based on Metro build to improve performance, providing `Dll` and `Dynamic Imports` features

React-Native Code Splitting Further split the React Native code based on Metro build to improve performance, providing Dll and Dynamic Imports feature

Dec 29, 2022

Simple and customizable React UI components.

poem-ui Simple and customizable React UI components. Some components use third-party plug-ins to improve the interaction. You can remove third-party p

Jan 5, 2022

Tutorial created in collaboration with Enyel Sequeira, taught by JavaScript Mastery.

Tutorial created in collaboration with Enyel Sequeira, taught by JavaScript Mastery.

Travel Advisor Live Site Introduction Build and Deploy an advanced Travel Companion Application using Google Maps. With Geolocation, Google Maps API,

Jan 3, 2023

Example "Mushroom App" used as a p2panda tutorial

Example

mushroom-app-tutorial This is an example app accompanying the p2panda tutorial "Let's build a mushroom app!" with TypeScript, Webpack and React. Usage

Nov 4, 2022
Comments
  • feat: add responsive classes for different device type

    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)
    opened by matt-d-webb 1
Owner
Samuel Liedtke
Samuel Liedtke
GitHub
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 83.6k Dec 30, 2022
Getir.com-react-tailwind - Getir.com anasayfa react + tailwind front-end

Getir.com React + Tailwind Front-end Bir gece uğraşı olarak getir.com'un anasayf

Tayfun Erbilen 102 Dec 17, 2022
This is a code repository for the corresponding video tutorial. In this video, we're going to build a Modern UI/UX Restaurant Landing Page Website

Restaurant Landing Page Live Site Stay up to date with new projects New major projects coming soon, subscribe to the mailing list to stay up to date h

Adrian Hajdin - JavaScript Mastery 843 Jan 4, 2023
Build Google 2.0 with Tailwind CSS & Next.js for Education Purpose..

Paradise of Creativity Parimal Nakrani This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server:

Parimal Nakrani 1 Dec 21, 2021
Build Instagram 2.0 with Next.js (Firebase v9, Tailwind CSS, NextAuth, Recoil) for the Education Purpose..

This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind docs.

Parimal Nakrani 1 Dec 24, 2021
React tutorial

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Safa ABALLAGH 6 Sep 25, 2021
React Hooks tutorial for beginners.

React Hooks for Beginners git clone <url> Clone into the repo code react-hooks Open the folder in VS Code npm install Install the dependencies npm sta

Mohammad Muazam 2 Oct 10, 2022
Nextjs CRUD with React Context API and Tailwind CSS

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Fazt Web 23 Sep 25, 2022
Simple React Social Network, built with React,Node,Express,MongoDB and Tailwind

Full stack react social network application A mini social network application built with React,Typescript, Redux, Node, Express, MongoDB, and Tailwind

Albenis Kërqeli 31 Dec 19, 2022
This hook allows you to isolate and manage the state within the component, reducing rendering operations and keeping the source code concise.

React Hook Component State This hook allows you to isolate and manage the state within the component, reducing rendering operations and keeping the so

Yongwoo Jung 2 May 15, 2022