@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/tableimport 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:
datatype:Array<T>The only mandatory prop which Table requires.
columnDefstype:Array<ColumnDef<T> | AccessorKeyColumnDef<any, any>>Exactly what you know about ColumnDef from
@tanstack/table.showFootertype:booleandefault:falseWhether to show the table footer containing pagination controls.
rowSelectionModetype: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
initialColumnSizingtype:ColumnSizingStateInitial column sizes to use when rendering the table.
onColumnSizingChangetype:(columnSizing: ColumnSizingState) => voidCallback function called when column sizes change.
searchTexttype:stringText to filter the table rows. Works with
setSearchText.setSearchTexttype:(value: any) => voidCallback to update the search text.
defaultColumntype: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 }customTableFootertype:(props: any) => ReactNodeCustom React component to render as the table footer. Receives table instance and pagination state as props.
initialPageSizetype:numberdefault:10Initial number of rows to display per page.
onCellClicktype:(props: { cell: any; row: any }) => anyCallback fired when a cell is clicked. Receives the cell and row objects.
classNametype:stringCSS class to apply to the table wrapper.
onBottomReachedtype:() => voidCallback fired when the user scrolls to the bottom of the table. Useful for implementing infinite scroll.
visibleColumnstype:{ [columnId: string]: boolean }Object mapping column IDs to visibility state. Controls which columns are visible.
onVisibleColumnsChangetype:(value: any) => voidCallback fired when column visibility changes.
showColumnsSelectortype:booleandefault:falseWhether to show the column visibility toggle menu.
allowColumnReordertype:booleandefault:falseWhether to allow columns to be reordered by the user.
shouldAnimatetype:booleandefault:trueWhether to animate column reordering.
defaultColumnOrdertype: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.
initialColumnOrdertype:ColumnOrderStateInitial state for column ordering. This takes precedence over defaultColumnOrder and represents a user's previously saved column order.
onColumnsOrderChangetype:(value: any) => voidCallback fired when column order changes.
6 months ago
6 months ago
6 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
6 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