react-data-table-tailwind
Version:
A simple data table component for React with TailwindCSS
69 lines (51 loc) • 1.68 kB
Markdown
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.
1. Install dependencies:
```sh
npm i react-data-table-tailwind
```
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;
```
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.
```
This project