@talkohavy/table v1.0.12
@talkohavy/table
The most simple Table implementation in the world, that fits 90% of your use-cases.
1. Supported Features
- Row Virtualization
- Row selection (Multi & Single)
- Sticky Headers
- Sorting (including multi-sort)
- Column Resizing
- Column Width Persistence (after page refresh)
- Column Ordering
- Column Picker
- Column stretching to fill the container's width
- Group Headers
- Pagination
- Infinite scroll
- onRowClick event
- Load more data when reaching bottom
- ⭐️Highly customizable⭐️ with custom css hooks for personal styling
2. Getting Started
install the package:
npm install @talkohavy/table
import and use the Table
component like so:
import { Table } from '@talkohavy/table';
export const data = [
{
id: 1,
first_name: 'Emlen',
last_name: 'Orth',
email: 'eorth0@sohu.com',
gender: 'Female',
ip_address: '163.228.179.208',
},
{
id: 2,
first_name: 'Conrad',
last_name: 'Liepmann',
email: 'cliepmann1@tuttocitta.it',
gender: 'Male',
ip_address: '225.98.191.215',
},
{
id: 3,
first_name: 'Magnum',
last_name: 'Le Brom',
email: 'mlebrom2@examiner.com',
gender: 'Male',
ip_address: '170.255.125.199',
},
{
id: 4,
first_name: 'Bette',
last_name: 'Wroughton',
email: 'bwroughton3@psu.edu',
gender: 'Female',
ip_address: '169.143.132.230',
},
];
export default function App() {
return (
<div style={{ width: '100%' }}>
<Table data={data} />
</div>
);
}
That's it 🙂
Now, since Table is essentially a wrapper around @tanstack/table
, you can pass columnDefs to it as you normally would:
import { Table } from '@talkohavy/table';
import { createColumnHelper } from '@tanstack/react-table';
const columnHelper = createColumnHelper<any>();
const columnDefs = [
columnHelper.accessor('id', { header: 'ID' }),
columnHelper.accessor('first_name', { header: 'First Name', enableSorting: true }),
columnHelper.accessor('last_name', { header: 'Last Name' }),
columnHelper.accessor('email', { header: 'Email' }),
columnHelper.accessor('gender', { header: 'Gender' }),
columnHelper.accessor('ip_address', { header: 'IP Address' }),
];
export const data = [/* ... data here ...*/];
export default function App() {
return (
<div style={{ width: '100%' }}>
<Table data={data} columnDefs={columnDefs} />
</div>
);
}
Play around and have fun exploring 🧡
3. Table Options
Here's a list of all supported options:
data
type:Array<T>
The only mandatory prop which Table requires.
columnDefs
type:Array<ColumnDef<T> | AccessorKeyColumnDef<any, any>>
Exactly what you know about ColumnDef from
@tanstack/table
.showFooter
type:boolean
default:false
Whether to show the table footer containing pagination controls.
rowSelectionMode
type:enum: 'none' | 'single' | 'multi'
default:'none'
Controls the row selection behavior:
'none'
: No row selection enabled'single'
: Only one row can be selected at a time'multi'
: Multiple rows can be selected at once
initialColumnSizing
type:ColumnSizingState
Initial column sizes to use when rendering the table.
onColumnSizingChange
type:(columnSizing: ColumnSizingState) => void
Callback function called when column sizes change.
searchText
type:string
Text to filter the table rows. Works with
setSearchText
.setSearchText
type:(value: any) => void
Callback to update the search text.
defaultColumn
type:Partial<ColumnDef<TData, unknown>>
Default configuration for all columns. This can include settings like:
{ sortDescFirst: boolean; // Default sorting direction enableSorting: boolean; // Enable sorting on all columns enableMultiSort: boolean; // Enable multi-column sorting enableGlobalFilter: boolean; // Enable global filtering enableColumnFilter: boolean; // Enable per-column filtering enablePinning: boolean; // Enable column pinning enableGrouping: boolean; // Enable grouping enableResizing: boolean; // Enable column resizing }
customTableFooter
type:(props: any) => ReactNode
Custom React component to render as the table footer. Receives table instance and pagination state as props.
initialPageSize
type:number
default:10
Initial number of rows to display per page.
onCellClick
type:(props: { cell: any; row: any }) => any
Callback fired when a cell is clicked. Receives the cell and row objects.
className
type:string
CSS class to apply to the table wrapper.
onBottomReached
type:() => void
Callback fired when the user scrolls to the bottom of the table. Useful for implementing infinite scroll.
visibleColumns
type:{ [columnId: string]: boolean }
Object mapping column IDs to visibility state. Controls which columns are visible.
onVisibleColumnsChange
type:(value: any) => void
Callback fired when column visibility changes.
showColumnsSelector
type:boolean
default:false
Whether to show the column visibility toggle menu.
allowColumnReorder
type:boolean
default:false
Whether to allow columns to be reordered by the user.
shouldAnimate
type:boolean
default:true
Whether to animate column reordering.
defaultColumnOrder
type:string[]
Optional array of column IDs to set as the default column order. If not provided, the default order will be determined from the order of column definitions.
initialColumnOrder
type:ColumnOrderState
Initial state for column ordering. This takes precedence over defaultColumnOrder and represents a user's previously saved column order.
onColumnsOrderChange
type:(value: any) => void
Callback fired when column order changes.
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
5 months ago
5 months ago
5 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago