{"componentChunkName":"component---src-templates-blog-js","path":"/blog/how-to-create-react-tables-using-tailwind-css/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares"}},"mdx":{"id":"a972eb01-3cc9-532e-8770-20eac12cda19","excerpt":"Tailwind React Table This article will guide you through the process of creating Tailwind Tables using React. Tailwind Tables are an essential part of many web…","body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"title\": \"How to create Tailwind Tables using React.\",\n \"lastUpdated\": \"20 May 2024\",\n \"date\": \"2021-01-10T02:16:04+01:00\",\n \"metaTitle\": \"Tailwind React Table\",\n \"metaDescription\": \" This article will guide you through the process of creating Tailwind Tables using React. Tailwind Tables are an essential part of many web applications, allowing you to present data in a structured and organized manner. We will cover the step-by-step process of building a Tailwind Table with various features like sorting, filtering, and pagination.\",\n \"type\": \"blog\",\n \"author\": \"Amarachi Iheanacho\",\n \"role\": \"Technical Writer\",\n \"authorImage\": \"/blog/author/author_amarachi.jpg\",\n \"image\": \"./_/images/react-tables-index.png\",\n \"tags\": [\"frontend\", \"reactjs\", \"tailwindcss\"],\n \"previousTitle\": \"How to create React Forms using Tailwind CSS\",\n \"previousPath\": \"how-to-create-react-forms-using-tailwind-css\",\n \"nextTitle\": \"How to Create React Tabs with Tailwind CSS.\",\n \"nextPath\": \"how-to-create-react-tabs-with-tailwind-css\",\n \"blogtype\": \"reactjs\",\n \"canonicalUrl\": \"https://windframe.dev/blog/how-to-create-react-tables-using-tailwind-css\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", null, \"Tailwind React Table\"), mdx(\"p\", null, \"This article will guide you through the process of creating Tailwind Tables using React. Tailwind Tables are an essential part of many web applications, allowing you to present data in a structured and organized manner. We will cover the step-by-step process of building a Tailwind Table with various features like sorting, filtering, and pagination.\"), mdx(\"h2\", null, \"Table of Content\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Prerequisites\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"What is Tailwind CSS\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Creating our Tailwind Table using React\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Installing Tailwind CSS\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Creating our React Tailwind CSS Table\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tailwind Tables Examples\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Conclusion\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Resources\")), mdx(\"h2\", null, \"Prerequisities\"), mdx(\"p\", null, \"To make the most of this article, you must have the following:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"A basic understanding of HTML.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"A basic understanding of CSS.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"A basic understanding of React.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Node and its package manager, npm, Run the command node -v && npm -v to verify we have them installed, or install them from \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://nodejs.org/en/\"\n }, \"here\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Alternatively, we can use another package manager, \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://yarnpkg.com/\"\n }, \"Yarn\"), \".\")), mdx(\"h2\", null, \"What is Tailwind CSS\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://tailwindcss.com/\"\n }, \"TailwindCSS\"), \" is a self-proclaimed utility-first CSS framework, that allows the developer to use custom-made CSS classes that give the developers access to CSS styles that make it easier and a lot faster to build applications.\"), mdx(\"p\", null, \"\\\"It's fast, flexible, and reliable\\\".\"), mdx(\"p\", null, \"To start creating our react Tailwind table application we have to first create a react project.\"), mdx(\"h2\", null, \"Creating our Tailwind Table using React\"), mdx(\"p\", null, \"To create a new react project, we go to our terminal, cd in the directory we want, and then run this command \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"npx create-react-app project-name\"), \".\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"cd Documents\\nnpx create-react-app project-name\\n\\n\")), mdx(\"h2\", null, \"Installing Tailwind CSS\"), mdx(\"p\", null, \"Next up you install the tailwind CSS library in your project, and we change the directory to the project you created earlier.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"cd project-name\\n\")), mdx(\"p\", null, \"The next thing is to install Tailwind CSS into this directory using \\\"npm install\\\".\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"npm install -D tailwindcss postcss autoprefixer\\n\\n\")), mdx(\"p\", null, \"The piece of code above allows us to install the Tailwind CSS and its peer dependencies in our Tailwind table project, we then generate our \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"tailwind.config.js\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"postcss.config.js\"), \" files by running the following command below:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"npx tailwindcss init -p\\n\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Configuring your templates path\")), mdx(\"p\", null, \"To configure your paths go to your \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"tailwind.config.js\"), \", and edit your \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"module.exports\"), \" object, add the paths to your template files in your \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"content\"), \" array.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"module.exports = {\\n content: ['./src/**/*.{js,jsx,ts,tsx}'],\\n theme: {\\n extend: {},\\n },\\n plugins: [],\\n};\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Add the Tailwind directives to your CSS\")), mdx(\"p\", null, \"Add the tailwind directives in your \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"./src/index.css\"), \" file.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \"@tailwind base;\\n@tailwind components;\\n@tailwind utilities;\\n\")), mdx(\"p\", null, \"After this, we run our project\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"npm run start\\n\\n\")), mdx(\"p\", null, \"You should see the image below on our browser when you go to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"http://localhost:3000/\"), \".\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"https://www.devwares.com/blog/images/REACT.png\",\n \"alt\": \"React Bootstrap Tables\"\n })), mdx(\"h2\", null, \"Creating our React Table Using Tailwind CSS\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"React Table with Tailwind CSS\")), mdx(\"p\", null, \"Building a react table with Tailwind CSS is easy at this stage. so far, we have installed our react and Tailwind CSS into our project. The next step will be to start writing our code on files.\"), mdx(\"p\", null, \"The react Tailwind Table will allow us to align or arrange content in multiple lines, and also add avatars to our tables.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"const people = [\\n {\\n name: 'Jane Cooper',\\n title: 'Regional Paradigm Technician',\\n department: 'Optimization',\\n role: 'Admin',\\n email: 'jane.cooper@example.com',\\n image: 'https://bit.ly/33HnjK0',\\n },\\n {\\n name: 'John Doe',\\n title: 'Regional Paradigm Technician',\\n department: 'Optimization',\\n role: 'Tester',\\n email: 'john.doe@example.com',\\n image: 'https://bit.ly/3I9nL2D',\\n },\\n {\\n name: 'Veronica Lodge',\\n title: 'Regional Paradigm Technician',\\n department: 'Optimization',\\n role: ' Software Engineer',\\n email: 'veronica.lodge@example.com',\\n image: 'https://bit.ly/3vaOTe1',\\n },\\n // More people...\\n];\\n\\nexport default function App() {\\n return (\\n
\\n
\\n
\\n
\\n \\n \\n \\n \\n Name\\n \\n \\n Title\\n \\n \\n Status\\n \\n \\n Role\\n \\n \\n \\n \\n \\n {people.map(person => (\\n \\n \\n \\n \\n \\n \\n \\n ))}\\n \\n
\\n Edit\\n
\\n
\\n
\\n \\\"\\\"\\n
\\n
\\n
{person.name}
\\n
{person.email}
\\n
\\n
\\n 		\\n
{person.title}
\\n
{person.department}
\\n 		\\n \\n Active\\n \\n \\n {person.role}\\n \\n \\n Edit\\n \\n
\\n
\\n
\\n
\\n
\\n );\\n}\\n\")), mdx(\"p\", null, \"In the code above, we rendered the information we got in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"people\"), \" object, which could be named and also contain anything. We use the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"table\"), \" element to create the table, and elements like \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"th\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"tr\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"td\"), \" for different parts of the table, these parts are the table header, table row, and table data respectively.\\nThe \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"people.map\"), \" function loops over the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"people\"), \" object and renders the information in the object.\\nThe react table using Tailwind CSS will look like the image below.\"), mdx(\"tableExample\", null), mdx(\"h2\", null, \"Tailwind Tables Examples\"), mdx(\"h3\", null, \"Tailwind Table with a delete button\"), mdx(\"p\", null, \"This table contains some ids and emails along with a good design edit button and deletes button.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"export const TableExample1 = () => {\\n return (\\n
\\n
\\n
\\n
\\n \\n \\n \\n \\n ID\\n \\n \\n Name\\n \\n \\n Email\\n \\n \\n Edit\\n \\n \\n Delete\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n 1\\n Jone Doe\\n jonne62@gmail.com\\n \\n \\n Edit\\n \\n \\n \\n Delete\\n \\n
\\n 2\\n Jone Doe\\n jonne62@gmail.com\\n \\n \\n Edit\\n \\n \\n \\n Delete\\n \\n
\\n 3\\n Jone Doe\\n jonne62@gmail.com\\n \\n \\n Edit\\n \\n \\n \\n Delete\\n \\n
\\n 4\\n \\n Mary Poppins\\n \\n marypoppins@gmail.com\\n \\n \\n Edit\\n \\n \\n \\n Delete\\n \\n
\\n
\\n
\\n
\\n
\\n );\\n};\\n\")), mdx(\"p\", null, \"The Tailwind table should look like the image below.\"), mdx(\"tableExample1\", null), mdx(\"p\", null, \"This table template we created here is free using windframe.\"), mdx(\"p\", null, \"which is a lot easier to set up than writing all the codes yourself.\"), mdx(\"p\", null, \"Windframe is a tool created to help you visually build tailwind CSS components, prototypes, websites, and web apps. It also allows you to ship projects faster using an intuitive tailwind builder and editor.\"), mdx(\"p\", null, \"You can check out some of the things you can do with this technology \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev\"\n }, \"here\"), \".\"), mdx(\"p\", null, \"Although there are other Tailwind CSS packages you can use to build this react table using tailwind which is not free. You can check out the pricing \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://tailwindui.com/pricing\"\n }, \"here\"), \".\"), mdx(\"h2\", null, \"Conclusion\"), mdx(\"p\", null, \"In this article, we discussed what tailwind CSS is and why you would need to incorporate the library into your project. We also discussed creating a react table with the Tailwind CSS templates and other tools to make your work faster and easier.\"), mdx(\"h2\", null, \"Resources\"), mdx(\"p\", null, \"You may also find the following resources useful :\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/Iheanacho-ai/devwares-tailwind-tables\"\n }, \"Link to the Github Code\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://tailwindui.com/components/application-ui/lists/tables\"\n }, \"Link to the Tailwind Tables Docs\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/docs/contrast/react/table/table\"\n }, \"Contrast React Tables\"))));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"How to create Tailwind Tables using React.","date":"January 10, 2021","image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAACXBIWXMAAAsTAAALEwEAmpwYAAACCklEQVQoz2NgZGRkAQNWFmZ2VlYmZmZ2NjYGBgZTQ+2Pj889urDzyMziHX05/bnhfbmRc2szt89oOL9xyoXts09tm8/Aw8Ojqamlpq6koWaXbZVpo2ukrqkhLi5paqjz9fmFJ5d2X15Svb0nszzcpTPdf2JR/Oae/P1Tcnd2p+xb0snAx8dnaGCsq6egr1Nsp7/d3MDQ0NBAWkbOzEjnx6srL24cmFYWtasvqyfTN9bbZn1P4eEpucdn5B+cnLVvcScDNze3qqqqopKChrqBnp6DopKSurqaiKiYoZ7m+0fn757blRHoMK0ksjw9LMLZeMvksikV8XNqk3dPzD+5cQbQdwwKCvIqysqystJKynLKykr8/PwgUQbGlQun7NkwryA5sKKsKCAowMHS3MlUJyUpOj8va2574ZIpjQzAoNLT09HV1TYyMrKytjI2NtLW1mJnB4VZRUb4vJ6K4qyo0NAAQz2dpCCPCEs1XW312BDHqqxQHy9XBgiQlwfaqayoqKCopMjKygoUkZYUay9JbKnIzEwKz06JzEiOsbc21dBUc3cyO7u5tCAj2MHZmQETACMPSMrJSNpYmnDz8fPw8UvIAs1W4+HlcXN3l5YSWzU5oSTN283egoEVDNiADgUjdjDJyMQkKS6irakqJMivrihtZm4iIMAnJyvT3dGkraGUneDeWZnQWJgAAHbVmDQgfZMLAAAAAElFTkSuQmCC","aspectRatio":2.2522522522522523,"src":"/static/00bb18e8d120d41e404669ff0ae8e811/c804c/react-tables-index.png","srcSet":"/static/00bb18e8d120d41e404669ff0ae8e811/84249/react-tables-index.png 250w,\n/static/00bb18e8d120d41e404669ff0ae8e811/c804c/react-tables-index.png 470w","sizes":"(max-width: 470px) 100vw, 470px"}}},"imageExternal":null,"lastUpdated":"20 May 2024","author":"Amarachi Iheanacho","role":"Technical Writer","authorImage":"/blog/author/author_amarachi.jpg","metaTitle":"Tailwind React Table","metaDescription":" This article will guide you through the process of creating Tailwind Tables using React. Tailwind Tables are an essential part of many web applications, allowing you to present data in a structured and organized manner. We will cover the step-by-step process of building a Tailwind Table with various features like sorting, filtering, and pagination.","previousTitle":"How to create React Forms using Tailwind CSS","previousPath":"how-to-create-react-forms-using-tailwind-css","nextTitle":"How to Create React Tabs with Tailwind CSS.","nextPath":"how-to-create-react-tabs-with-tailwind-css","blogtype":"reactjs"},"fields":{"slug":"/how-to-create-react-tables-using-tailwind-css/"}},"previous":null,"next":null},"pageContext":{"id":"a972eb01-3cc9-532e-8770-20eac12cda19"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3706406642","3706406642","4045616534","4045616534","956403285","956403285"]}