⚠️ Deprecation Warning

This package (react-base-data-table) has been deprecated.

Please use the new package: react-table-editable instead.

For documentation, visit: https://react-base-table-website.vercel.app/docs/quick-start

React Table Editable

A React editable table component that is highly customizable and extensible, with support for inline editing, sorting, filtering, grouping, drag-and-drop, collaboration, and custom rendering. Perfect for building interactive data grids, spreadsheets, or dashboards in React.

📖 View Live Documentation and Examples

Features

• Inline Editing: Edit cell values directly in the table.
• Sorting & Filtering: Sort by columns and filter data easily.
• Row Grouping: Group rows by any column with collapsible sections.
• Row Highlighting: Highlight rows or cells based on custom conditions.
• Drag & Drop: Reorder rows with intuitive drag-and-drop support.
• Custom Rendering: Customize headers and cells with React components.
• Context Menus: Right-click on cells for customizable menus.
• Collaboration: Real-time multi-user editing and selection display.
• Comments: Add comments directly to table cells.
• Theming: Easily style with Tailwind CSS, DaisyUI, or custom classes.

Installation

npm install react-table-editable

Usage

import { BaseTable } from "react-table-editable";
import "react-table-editable/style.css";

Basic Example

const headers = [
  { id: "name", text: "Name", sortable: true },
  { id: "age", text: "Age", sortable: true },
];

const items = [
  { name: "John Doe", age: 30 },
  { name: "Jane Smith", age: 25 },
];

<BaseTable headers={headers} items={items} />;

Props

BaseTableProps

| Prop | Type | Description | | ---------------------------- | -------------------------------------------------- | --------------------------------------------------------- | | headers | BaseTableHeader[] | Column definitions for the table (required). | | items | TableItem[] | Data items to display (required). | | height | string | Table height. | | advancedSettings | AdvancedTableSettings | Additional table configuration options. | | highlightCondition | HighlightCondition[] | Conditions for highlighting rows/cells. | | comments | CommentData[] | Comments data for cells. | | activeFilters | ActiveTableFilter[] | Active column filters. | | groupBy | string | Column ID to group rows by. | | linkedGroups | LinkedGroup[] | Configuration for linked group behavior. | | collaboration | CollaborationConfig | Real-time collaboration settings. | | onUserSelectionChange | (data: UserSelectionData) => void | Callback when user selection changes (for collaboration). | | onSetHighlightCondition | (condition, item) => void | Callback to set highlight condition. | | onRemoveHighlightCondition | (condition, cssProperty, item) => void | Callback to remove highlight condition. | | onSaveComment | (comment, item) => void | Callback when a comment is saved. | | onDeleteComment | (comment, item) => void | Callback when a comment is deleted. | | onChange | (itemUpdated, originalIndex, fromArray?) => void | Callback when a cell value changes. | | onBulkChange | (items, headerId?) => void | Callback for bulk cell changes. | | onBulkFieldChange | (items, headerId) => void | Callback for bulk field changes on a column. | | groupByCustomRender | (groupBy, value, ...) => ReactNode | Custom render function for group rows. | | onResetSort | () => void | Callback to reset sorting. | | onRowDoubleClick | (item) => void | Callback when a row is double-clicked. | | onSortByColumn | (columnId) => void | Callback when sorting by a column. | | onAddListOption | (newOption, header) => void | Callback when adding a new list option. | | onRowsReordered | (fromIndex, toIndex) => void | Callback when rows are reordered via drag & drop. |

AdvancedTableSettings

| Property | Type | Description | | ----------------------- | -------------------------------- | ------------------------------------------- | | marginTop | string | Top margin for the table. | | noBorder | boolean | Removes the table border. | | pinColumns | boolean | Pins columns for horizontal scrolling. | | alignCenterInLine | boolean | Centers content within rows. | | currentSortId | string | ID of the currently sorted column. | | contextMenu | { showOnHeader?, showOnCell? } | Context menu visibility options. | | contrastRow | boolean | Alternates row background colors. | | indexUseOriginalOrder | boolean | Uses original item order for index column. | | enableRowDragDrop | boolean | Enables row drag & drop reordering. | | currentUsername | string | Current user's username. | | showIndex | boolean | Shows an index column. | | selectNewOptionOnAdd | boolean | Auto-selects new option when added to list. | | canAddListOptions | boolean | Allows adding new options to list columns. | | showFooter | boolean | Shows table footer. | | rowIdProperty | string | Property to use as unique row identifier. | | tableId | string | Unique table identifier. | | focusedRowIndex | number | Index of the focused row. | | showFlashOnCellUpdate | boolean | Shows flash animation on cell updates. | | disabledRows | { property, values } | Disables rows matching property values. |

BaseTableHeader

| Property | Type | Description | | --------------- | ---------------------------------------------------------- | -------------------------------------------- | | id | string | Unique column identifier (required). | | text | string | Column header display text (required). | | hasFilter | boolean | Enables filtering for the column. | | width | number | Column width in pixels. | | children | BaseTableHeader[] | Nested columns for grouped headers. | | editOptions | EditOptions | Inline editing configuration. | | fromArray | string | Property name for array-based rows. | | arrayRowsOnly | boolean | Shows cell only in array rows, not main row. | | sortable | boolean | Enables sorting for the column. | | align | 'left' \| 'center' \| 'right' | Cell content alignment. | | customSort | (a, b, ascending) => number | Custom sorting function. | | customHeader | (header) => ReactNode | Custom header render function. | | customRender | (item, header, fromArrayData?, isDisabled?) => ReactNode | Custom cell render function. |

EditOptions

| Property | Type | Description | | ------------------------ | ----------------------------------- | ------------------------------------------ | | editable | boolean | Enables inline editing. | | isDisabled | (item, fromArrayData?) => boolean | Function to determine if cell is disabled. | | notApplicable | (item, fromArrayData?) => boolean | Function to mark cell as N/A. | | greyedOutIfNotEditable | boolean | Greys out non-editable cells. | | required | boolean | Marks field as required. | | type | 'string' \| 'list' \| 'number' | Cell data type. | | options | string[] | Options for list type columns. | | defaultValue | string \| number | Default value for new items. | | canAddNewOption | boolean | Allows adding new options to list. |

CollaborationConfig

| Property | Type | Description | | --------------- | --------------------- | ----------------------------------------------------- | | collaborators | UserSelectionData[] | List of collaborators and their selections. | | currentUserId | string | Current user's ID (to filter from display). | | debounceMs | number | Debounce time for selection updates (default: 150ms). | | color | string | Current user's selection color. | | version | number | Collaboration data version. |

License

This project is licensed under the MIT License.