This package provides a customizable table component built with React.js and styled using Tailwind CSS. With this table component, you can easily integrate tables into your React projects while leveraging the flexibility and utility classes of Tailwind CSS for styling..
You can install the package via npm or yarn:
npm install react-tailwindcss-table
or
yarn add react-tailwindcss-table
To use the table component in your React application, import it and pass the necessary props:
import React from 'react';
import { Table } from 'react-tailwindcss-table'
import type { Column } from 'react-tailwindcss-table';
type Person = {
id: number;
name: string;
age: number;
city: string;
}
const MyTableComponent = () => {
// Sample data
const data = [
{ id: 1, name: 'John Doe', age: 25, city: 'New York' },
{ id: 2, name: 'Jane Smith', age: 30, city: 'Los Angeles' },
{ id: 3, name: 'Bob Johnson', age: 22, city: 'Chicago' }
]
// Define columns
const columns: Array<Column<Person>> = [
{
key: 'name',
title: 'Name'
},
{
key: 'age',
title: 'Age'
},
{
key: 'city',
title: 'City'
}
];
return (
<div>
<h1>My Table</h1>
<Table
data={data}
columns={columns}
className={{
container: "overflow-x-auto",
wrapper: "inline-block min-w-full align-middle",
thead: "border-none bg-red-500",
table: "min-w-full divide-y divide-gray-100",
tbody: "divide-y divide-gray-100",
th: "p-3 text-left text-base font-bold text-black",
td: "whitespace-nowrap px-3 py-4 text-left text-base font-normal text-black",
empty: "p-6 text-lg text-black"
}} />
</div>
);
};
export default MyTableComponent;
Data:
An array of objects representing the rows of the table. Each object should contain key-value pairs where the keys correspond to column keys.columns:
An array of objects representing the columns of the table. Each object should contain a key (unique identifier for the column) and a title (displayed column header).className:
This prop allows you to style most of the components used by this library.
classNames takes an object with keys to represent the various inner components that react-tailwindcss-table is made up of.
type Props<T> = {
// ....
className: {
container: string;
wrapper: string;
thead: string;
table: string;
tbody: string;
th: string;
td: string;
empty?: string;
}
};
import React from 'react';
import { Table } from 'react-tailwindcss-table'
import type { Column } from 'react-tailwindcss-table';
type Person = {
id: number;
name: string;
age: number;
city: string;
}
const MyTableComponent = () => {
// Sample data
const data = [
{ id: 1, name: 'John Doe', age: 25, city: 'New York' },
{ id: 2, name: 'Jane Smith', age: 30, city: 'Los Angeles' },
{ id: 3, name: 'Bob Johnson', age: 22, city: 'Chicago' }
]
// Define columns
const columns: Array<Column<Person>> = [
{
key: 'name',
title: 'Name'
},
{
key: 'age',
title: 'Age'
},
{
key: 'city',
title: 'City'
}
];
return (
<div>
<h1>My Table</h1>
<Table
data={data}
columns={columns}
className={{
container: "overflow-x-auto",
wrapper: "inline-block min-w-full align-middle",
thead: "border-none bg-red-500",
table: "min-w-full divide-y divide-gray-100",
tbody: "divide-y divide-gray-100",
th: "p-3 text-left text-base font-bold text-black",
td: "whitespace-nowrap px-3 py-4 text-left text-base font-normal text-black",
empty: "p-6 text-lg text-black"
}} />
</div>
);
};
export default MyTableComponent;
This package was inspired by the need for a customizable table component for React Tailwind CSS projects. Special thanks to the team members and team leads.