0.0.6-beta-4 • Published 6 months ago
unstyled-table v0.0.6-beta-4
Unstyled Table
An unstyled react table component built on top of @tanstack/react-table v8. (Read Documentation)
Installation
npm install --save unstyled-table
#or
yarn add unstyled-table
#or
pnpm add unstyled-table
Get started
//react component
import { useState } from 'react';
import { Table } from 'unstyled-table';
const columns = [
{ accessorKey: 'name', header: 'Name' },
{ accessorKey: 'email', header: 'Email' },
];
export default function YourTable() {
const [data, setData] = useState([
{ name: 'Touha', email: 'touha@example.com' },
{ name: 'Sadman', email: 'sadman@example.com' },
{ name: 'Otaku Dev', email: 'otakudev@example.com' },
]);
return <Table columns={columns} data={data} />;
}
Customization
import { useState } from 'react';
import { UnstyledTable } from 'unstyled-table';
const columns = [
{ accessorKey: 'name', header: 'Name' },
{ accessorKey: 'email', header: 'Email' },
];
export default function YourTable() {
const [data, setData] = useState([
{ name: 'Touha', email: 'touha@example.com' },
{ name: 'Sadman', email: 'sadman@example.com' },
{ name: 'Otaku Dev', email: 'otakudev@example.com' },
]);
return (
<UnstyledTable
columns={columns}
data={data}
components={{
table: ({ children }) => (
<div className="table-wrapper">
<table className="table-class">{children}</table>
</div>
),
}}
/>
);
}
Read the documentation For in depth guide.
Roadmap
- Virtualized rows
- Virtualized rows with infinite scroll
0.0.6-beta-4
6 months ago
0.0.6-beta-3
6 months ago
0.0.6-beta-2
6 months ago
0.0.6-beta-1
6 months ago
0.0.5
6 months ago
0.0.4
6 months ago
0.0.3-alpha-3
10 months ago
0.0.3-alpha-2
12 months ago
0.0.3-alpha-1
12 months ago
0.0.3-alpha.0
12 months ago
0.0.3
12 months ago
0.0.2
12 months ago
0.0.1
12 months ago