A lightweight, flexible React table component with sorting, filtering, search, pagination, and drag-and-drop row reordering support.
npm install dynamic-mini-table


A flexible, customizable React table component for dynamic data display, sorting, filtering, searching, pagination, and drag-and-drop row reordering.
---
``bash`
npm install dynamic-mini-tableor
yarn add dynamic-mini-table
---
`tsx
import TableView from "dynamic-mini-table";
const headers = [
{ key: "id", title: "ID", width: 80, sort: true },
{ key: "name", title: "Name", width: 200 },
// ...more columns
];
const dataSource = [
{ id: 1, name: "Alice", email: "alice@email.com" },
{ id: 2, name: "Bob", email: "bob@email.com" },
// ...more rows
];
dataSource={dataSource}
pagination={true}
filter={true}
search={true}
showMove={true}
onUpdateOrder={({ orderRows, newOrder }) => {
// handle new order
}}
/>;
`
---
Below are the public props you can use with . headers
Some fields in the code are for internal/configuration use and are not intended as direct props—these are marked as (internal).
| Prop | Type | Default | Description |
| --------------------- | ------------------------------------ | ------------ | ----------------------------------------------------------------------- |
| | Header[] | Required | Array of column definitions (see Header Definition below). |dataSource
| | SourceData[] | Required | Array of data objects for each row. |selectedRows
| | SourceData[] | [] | Array of currently selected row objects. |onRowSelect
| | (rows) => void | () => {} | Callback when row selection changes. |showMove
| | boolean | false | Enable drag-and-drop row reordering. |onUpdateOrder
| | ({orderRows, newOrder}) => void | () => {} | Callback when row order changes. Receives new order and reordered rows. |pagination
| | boolean | true | Enable pagination controls. |paginationPlacement
| | "center" \| "left" \| "right" | "right" | Placement of pagination controls. |paginationType
| | "default" \| "inList" | "default" | Pagination mode. |pageOptions
| | number[] | [10,25,50] | Available page size options. |filter
| | boolean | true | Enable filter dropdown. |filterLabel
| | string | "Filter" | Label for the filter dropdown. |filterList
| | filterItem[] | [] | List of filter options. |filterValue
| | string \| number | "" | Currently selected filter value. |onFilterSelect
| | (value, item) => void | () => {} | Callback when a filter is selected. |filterView
| | React.ReactElement | | Custom filter component. |search
| | boolean | true | Enable search input. |searchData
| | string | | Search query string. |onSearch
| | (value) => void | () => {} | Callback when a search is performed. |searchView
| | React.ReactElement | | Custom search component. |searchInstant
| | boolean | false | If true, search triggers on input change. |searchType
| | "default" \| "trigger" \| "expand" | "default" | Search input type. |searchMode
| | "default" \| "inline" | "default" | Search mode. |searchKeys
| | string[] | [] | Keys to search in each row object. |searchTrigger
| | "click" \| "hover" | "click" | How search is triggered. |searchFieldClass
| | string | | Custom class for search field. |check
| | boolean | true | Show checkbox for row selection. |selectMatchKey
| | string | "id" | Unique key in data objects for selection and ordering. |tableType
| | "default" \| "striped" | "default" | Table style variant. |tableClass
| | string | | Additional class for table container. |tableHeaderClass
| | string | | Additional class for table header. |headerType
| | "default" \| "stick" | "stick" | Table header style variant. |start_stick
| | boolean | true | Stick first column (frozen left). |end_stick
| | boolean | true | Stick last column (frozen right). |clampColumnMessage
| | string | | Message to show when column content is clamped. |globalPlacement
| | "center" \| "left" \| "right" | "center" | Default column alignment. |loading
| | boolean | false | Show loading state. |loadRender
| | React.ReactElement | | Custom loader component. |loaderClass
| | string | | Loader CSS class. |stripe
| | boolean |false | Table stripe default false. |groupView
| | boolean | false | Enable group-panel rendering for rows that include groupRows. When true and groupAction is false, all group panels can be shown by default. |groupArrowClass
| | string | "" | Additional CSS class applied to the group toggle arrow icon. |groupAction
| | boolean | true | When true, each grouped row shows a toggle (arrow) to open/close its group panel. When false, group panels are controlled by groupView globally. |groupViewClass
| | string | "" | Additional class applied to the group panel container (.group__view-panel). |groupRender
| | (groupRows: any[], className: string) => React.ReactNode | undefined | Optional render callback to fully customize the group-panel output. Receives the group's rows and the className that would be used ("group__view-panel[ active]"). Return a React node to render. |groupCheck
| | boolean | false | When true, render checkbox controls inside grouped rows (used to select child items inside a group). Selection updates are emitted via onRowSelect. |groupColPadding
| | number | 16 | Pixel padding subtracted from the group's first-column minWidth when rendering child rows (helps visually nest group rows). |
wrapper_class, action_container, custom_pre_action_start, custom_post_action_start, custom_pre_action_end, custom_post_action_end, action_container_start_class, action_container_end_class, action__container_start_action_icon, action_container_start_action_label, action__container_start_action_class, enableAction, handleActionClick, etc.
> Note: These are for advanced customization and are not required for most use cases.
---
Each header object can have:
| Property | Type | Default | Description |
| ----------- | ------------------------------- | ----------- | ------------------------------------------ |
| key | string | | Data key for the column (required). |title
| | string | | Column title (required). |width
| | number | | Column width in pixels. |minWidth
| | number | | Minimum column width. |maxWidth
| | number | | Maximum column width. |sort
| | boolean | false | Enable sorting for this column. |type
| | "default" \| "html" | "default" | Cell type, e.g., 'html' for raw HTML. |expand
| | boolean | false | Enable expandable row for this column. |viewLines
| | number | | Clamp lines for cell content (multi-line). |placement
| | "left" \| "center" \| "right" | "center" | Text alignment. |
---
MIT
---
Note:
If you need advanced customization, please contact directly -email me. Feel free to contact us.