UNPKG

react-data-table-tailwind

Version:
69 lines (51 loc) 1.68 kB
# React Data Table with Tailwind CSS This project is a React component for displaying data in a table format, styled with Tailwind CSS. It supports features like pagination, loading state, and dark mode. ## Installation 1. Install dependencies: ```sh npm i react-data-table-tailwind ``` ## Usage Import the `DataTable` component and use it in your React application: ```tsx import React from "react"; import { DataTable } from "./src/DataTable"; import "./src/index.css"; const columns = [ { header: "Name", accessor: "name" }, { header: "Age", accessor: "age" }, { header: "Email", accessor: "email" }, ]; const data = [ { name: "John Doe", age: 30, email: "john@example.com" }, { name: "Jane Smith", age: 25, email: "jane@example.com" }, ]; function App() { return ( <div className="App"> <DataTable columns={columns} data={data} loading={false} usePagination={true} totalPages={5} /> </div> ); } export default App; ``` ## Props The `DataTable` component accepts the following props: - `columns`: An array of column definitions. - `data`: An array of data objects. - `loading`: A boolean indicating if the data is loading. - `usePagination`: A boolean indicating if pagination should be used. - `totalPages`: The total number of pages (required if `usePagination` is `true`). - `onPageChange`: A function to handle page changes. - `dark`: A boolean to enable dark mode. ## License This project is licensed under the ISC License. ``` Feel free to customize the README further based on your specific needs. ```