unstyled-table
v0.0.6-beta-4
Published
An unstyled react table component built on top of @tanstack/react-table v8
Downloads
112
Readme
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: '[email protected]' },
{ name: 'Sadman', email: '[email protected]' },
{ name: 'Otaku Dev', email: '[email protected]' },
]);
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: '[email protected]' },
{ name: 'Sadman', email: '[email protected]' },
{ name: 'Otaku Dev', email: '[email protected]' },
]);
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