What’s New in Drip Table 2.0? A Deep Dive into the Latest Frontend Table Framework

Generator Interaction Upgrade

The new generator adopts a three‑column layout (left‑center‑right) that highlights the table workspace, improves information‑processing efficiency, and adds a drawer‑style toggle for side panels. A top toolbar now offers quick access to common table configuration items, enabling a more intuitive, drag‑and‑drop experience.

Underlying Architecture Optimization

Version 1.0 relied on the heavy Drip Design component library, which introduced unnecessary dependencies and global style pollution. Drip Table 2.0 replaces this with a lightweight React Component core, eliminating excess bloat, reducing global CSS impact, and adding a virtual list for better performance.

The new architecture simplifies state management by using React Context, improves code quality, and makes future feature extensions easier.

Basic Table Capabilities

Editable cells are now supported through rc‑table integration, offering input fields, selectors, date pickers, and custom components bound to cell edit states. Developers can extend editing behavior by adding their own components.

Sub‑Table Functionality

Tables can now embed unlimited nested sub‑tables, with options to control default expansion and header/footer slots.

Row Dragging

A visual drag‑and‑drop feature lets users reorder rows directly within the table.

Fixed Rows and Columns

Developers can fix the first row or any column on the left or right, improving readability for large datasets.

Card Layout Addition

A new card‑style layout reuses the same JSON schema as the traditional table, offering a more visual, block‑based presentation that can be toggled with a single click. The layout supports configuring the number of cards per row to adapt to different screen resolutions.

Documentation: https://drip-table.jd.com/drip-table/layout/card-layout

Enhanced Building Capabilities

Drip Table 2.0 adds basic UI components such as dropdowns, date pickers, and web dialogs, enabling richer interactions directly within tables.

Column headers can now embed custom HTML fragments for advanced visual customization.

Global Configuration Improvements

New options include frozen headers, zebra striping, and other global settings that enhance overall usability.

For more details, visit the official site https://drip-table.jd.com/ and the GitHub repository https://github.com/JDFED/drip-table.