Pro Tailwind DataTable

Professional React DataTable built with Tailwind CSS.

✨ Features

• ✅ Professional Tailwind UI
• ✅ Auto S.No calculation
• ✅ Dynamic rows per page
• ✅ Total record display
• ✅ Skeleton loading
• ✅ Sorting
• ✅ Searching
• ✅ Pagination
• ✅ Custom column render support
• ✅ Lightweight
• ✅ Easy integration

📦 Installation

npm install pro-tailwind-datatable

or

pnpm add pro-tailwind-datatable

🚀 Usage

import React from "react"
import { DataTable } from "pro-tailwind-datatable"

const App = () => {

  const columns = [
    { header: "Name", accessor: "name" },
    { header: "Email", accessor: "email" },
    { 
      header: "Status", 
      accessor: "status",
      render: (value) => (
        <span className={value === "Active" ? "text-green-600" : "text-red-600"}>
          {value}
        </span>
      )
    }
  ]

  const data = [
    { name: "John", email: "[email protected]", status: "Active" },
    { name: "David", email: "[email protected]", status: "Inactive" },
    { name: "Sarah", email: "[email protected]", status: "Active" },
    { name: "Mike", email: "[email protected]", status: "Inactive" }
  ]

  return (
    <div className="p-6">
      <DataTable
        columns={columns}
        data={data}
        loading={false}
        showSno={true}
        rowsPerPageOptions={[5, 10, 20]}
      />
    </div>
  )
}

export default App

🧩 Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | columns | Array | required | Table column configuration | | data | Array | required | Table data | | loading | Boolean | false | Show skeleton loader | | showSno | Boolean | true | Enable/Disable auto S.No | | rowsPerPageOptions | Array | [5,10,20] | Dropdown rows per page |

📊 Column Format

{
  header: "Column Name",
  accessor: "objectKey",
  render?: (value, row) => JSX
}

Import css

import "pro-tailwind-datatable/dist/styles.css

🔢 Auto S.No Logic

S.No is automatically calculated 1 2 . . . n