@ant-design/pro-table vs @material-ui/data-grid vs ag-grid-react vs react-table
React Data Grid Libraries
Search packages..
@ant-design/pro-table@material-ui/data-gridag-grid-reactreact-tableSimilar Packages:

React Data Grid Libraries

React data grid libraries provide powerful tools for displaying and manipulating tabular data in web applications. They offer various features such as sorting, filtering, pagination, and editing capabilities, allowing developers to create dynamic and responsive data tables. These libraries are designed to enhance user experience by providing efficient data handling and customizable UI components, making it easier to manage large datasets effectively.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
@ant-design/pro-table04,732573 kB7689 months agoMIT
@material-ui/data-grid05,669-1,6695 years agoMIT
ag-grid-react015,187678 kB13013 days agoMIT
react-table027,865940 kB380-MIT

Feature Comparison: @ant-design/pro-table vs @material-ui/data-grid vs ag-grid-react vs react-table

Performance

  • @ant-design/pro-table:

    @ant-design/pro-table is optimized for performance with features like lazy loading and virtual scrolling, allowing it to handle large datasets efficiently without compromising user experience.

  • @material-ui/data-grid:

    @material-ui/data-grid is designed for high performance with features like virtualization and efficient rendering, making it suitable for applications with large amounts of data.

  • ag-grid-react:

    ag-grid-react is known for its exceptional performance, capable of rendering thousands of rows and columns with minimal lag. It supports features like row virtualization and server-side pagination to enhance performance further.

  • react-table:

    react-table is lightweight and focuses on performance by allowing developers to implement only the features they need. It does not impose any styling, which can lead to faster rendering times.

Customization

  • @ant-design/pro-table:

    @ant-design/pro-table offers extensive customization options, allowing developers to create tailored table layouts and functionalities, including custom cell rendering and editing capabilities.

  • @material-ui/data-grid:

    @material-ui/data-grid provides a variety of customization options that align with Material Design, enabling developers to modify styles, themes, and component behavior easily.

  • ag-grid-react:

    ag-grid-react is highly customizable, offering a wide range of APIs and configuration options to create complex grid behaviors and styles, making it suitable for enterprise-level applications.

  • react-table:

    react-table is extremely flexible and allows developers to customize every aspect of the table, from rendering to state management, providing complete control over the UI.

Ease of Use

  • @ant-design/pro-table:

    @ant-design/pro-table is user-friendly with a straightforward API, making it easy for developers to integrate and use within Ant Design projects without a steep learning curve.

  • @material-ui/data-grid:

    @material-ui/data-grid is designed to be intuitive and easy to use, especially for developers familiar with Material-UI, providing a familiar API and consistent design patterns.

  • ag-grid-react:

    ag-grid-react has a steeper learning curve due to its extensive feature set, but once mastered, it offers powerful capabilities for building complex data grids.

  • react-table:

    react-table has a simple API that is easy to learn, especially for those who are comfortable with React. However, its headless nature may require more initial setup for custom implementations.

Community and Support

  • @ant-design/pro-table:

    @ant-design/pro-table benefits from the strong Ant Design community, providing ample resources, documentation, and community support for developers.

  • @material-ui/data-grid:

    @material-ui/data-grid is backed by the Material-UI community, which is large and active, offering extensive documentation and support for developers.

  • ag-grid-react:

    ag-grid-react has a robust community and commercial support options, making it a reliable choice for enterprise applications that may require dedicated assistance.

  • react-table:

    react-table has a growing community with good documentation, but being a headless library, it may require more community-driven examples and resources for complex implementations.

Integration

  • @ant-design/pro-table:

    @ant-design/pro-table integrates seamlessly with other Ant Design components, making it an ideal choice for applications built on the Ant Design framework.

  • @material-ui/data-grid:

    @material-ui/data-grid integrates well with other Material-UI components, ensuring a consistent look and feel across applications that use Material Design.

  • ag-grid-react:

    ag-grid-react can be integrated with various frameworks and libraries, including Angular and Vue, providing flexibility for developers working in mixed environments.

  • react-table:

    react-table is framework-agnostic and can be integrated into any React application, allowing for maximum flexibility in how it is used alongside other libraries.

How to Choose: @ant-design/pro-table vs @material-ui/data-grid vs ag-grid-react vs react-table

  • @ant-design/pro-table:

    Choose @ant-design/pro-table if you are looking for a feature-rich table component that integrates seamlessly with Ant Design. It offers advanced features like editable cells, custom rendering, and built-in support for internationalization, making it ideal for enterprise applications.

  • @material-ui/data-grid:

    Select @material-ui/data-grid if you are already using Material-UI and want a grid that adheres to Material Design principles. It provides a robust set of features, including virtual scrolling, data grouping, and customizable columns, making it suitable for applications that require a modern look and feel.

  • ag-grid-react:

    Opt for ag-grid-react if you need a highly customizable and performant grid solution that can handle large datasets. It offers extensive features such as server-side operations, row grouping, and advanced filtering, making it perfect for applications that demand high performance and flexibility.

  • react-table:

    Use react-table if you prefer a lightweight and flexible solution that allows for complete control over the rendering of your tables. It is headless, meaning it provides the logic and state management while you define the UI, making it suitable for projects that require custom styling and behavior.

Similar Npm Packages to @ant-design/pro-table

@ant-design/pro-table is a powerful table component built on top of Ant Design, designed to provide a rich set of features for displaying and managing tabular data in React applications. It offers functionalities such as sorting, filtering, pagination, and customizable columns, making it an excellent choice for developers looking to create complex data tables with minimal effort. With its integration into the Ant Design ecosystem, it also ensures a consistent and visually appealing user interface.

While @ant-design/pro-table is a robust solution, there are several alternatives available in the React ecosystem that also provide table functionalities. Here are a few notable options:

  • @material-ui/data-grid is a component from the Material-UI library that offers a highly customizable and feature-rich data grid. It supports functionalities like sorting, filtering, pagination, and even row selection. If you are already using Material-UI in your project, this data grid component seamlessly integrates with the Material Design guidelines, providing a cohesive look and feel throughout your application.

  • ag-grid-react is a feature-rich data grid that is highly customizable and designed for performance. It supports a wide range of features, including grouping, pivoting, and server-side operations. ag-grid-react is suitable for applications that require advanced grid functionalities and can handle large datasets efficiently. Its flexibility and extensive API make it a popular choice for enterprise-level applications.

  • react-table is a lightweight and flexible table library for React that focuses on providing a headless UI approach. This means that it offers the core functionalities of a table without imposing any specific styles or layouts, allowing developers to fully customize the appearance and behavior of their tables. If you prefer a more hands-on approach to styling and want to build a table that fits your specific design requirements, react-table is an excellent choice.

To explore how @ant-design/pro-table compares with @material-ui/data-grid, ag-grid-react, and react-table, check out the comparison link: Comparing @ant-design/pro-table vs @material-ui/data-grid vs ag-grid-react vs react-table.

Similar Npm Packages to @material-ui/data-grid

@material-ui/data-grid is a powerful data grid component for React applications, part of the Material-UI library. It provides a rich set of features for displaying and manipulating tabular data, including sorting, filtering, pagination, and editing capabilities. The data grid is designed to be highly customizable and integrates seamlessly with Material-UI's design system, making it a popular choice for developers looking to build responsive and visually appealing data tables.

While @material-ui/data-grid offers a robust solution for data display, there are several alternatives in the React ecosystem that cater to different needs:

  • ag-grid-react is a feature-rich data grid component that provides a wide range of functionalities, including advanced filtering, grouping, and aggregation. It supports both controlled and uncontrolled modes, allowing developers to manage the grid's state as needed. ag-grid-react is particularly well-suited for enterprise applications that require extensive data manipulation capabilities and high performance. Its flexibility and extensive feature set make it a strong contender for complex data grid scenarios.

  • react-table is a lightweight and highly customizable table library for React applications. Unlike traditional data grid libraries, react-table focuses on providing a flexible API that allows developers to build their own table components tailored to specific requirements. It offers essential features like sorting, filtering, and pagination, but leaves the implementation details up to the developer. This makes react-table an excellent choice for projects where customization and control over the table's behavior and appearance are paramount.

To explore how @material-ui/data-grid compares with ag-grid-react and react-table, check out the comparison: Comparing @material-ui/data-grid vs ag-grid-react vs react-table.

Similar Npm Packages to ag-grid-react

ag-grid-react is a powerful data grid component for React applications. It provides a rich set of features for displaying and manipulating tabular data, including sorting, filtering, pagination, and editing capabilities. With its high performance and flexibility, ag-grid-react is suitable for both small and large datasets, making it a popular choice among developers who need a robust grid solution.

While ag-grid-react offers extensive capabilities, there are several alternatives in the React ecosystem that also provide data grid functionalities. Here are a few noteworthy options:

  • material-table is a data table component built on top of Material-UI, offering a simple and elegant way to display data in a tabular format. It provides features such as sorting, filtering, pagination, and inline editing, all while adhering to Material Design principles. If you are already using Material-UI in your project and want a data table that seamlessly integrates with its design language, material-table is an excellent choice.
  • react-data-grid is a feature-rich data grid component specifically designed for React applications. It supports a wide range of functionalities, including cell editing, keyboard navigation, and customizable cell rendering. react-data-grid is particularly well-suited for applications that require a spreadsheet-like experience, making it a great option for data-intensive applications where users need to interact with data in a dynamic way.
  • react-table is a lightweight and flexible data table library for React that provides a headless UI approach. This means that it offers the core functionalities of a data table, such as sorting, filtering, and pagination, while allowing developers to customize the UI to fit their specific needs. If you prefer a more hands-on approach to building your data table and want complete control over the rendering, react-table is an ideal solution.

To see how ag-grid-react compares with material-table, react-data-grid, and react-table, check out the comparison: Comparing ag-grid-react vs material-table vs react-data-grid vs react-table.

Similar Npm Packages to react-table

react-table is a powerful and flexible library for building tables in React applications. It provides a set of hooks and utilities that allow developers to create highly customizable and performant tables with features like sorting, filtering, pagination, and more. React Table is designed to be lightweight and unopinionated, giving developers the freedom to implement their own styles and behaviors. While React Table is a popular choice for table management in React, there are several alternatives worth considering:

  • react-data-table-component is a feature-rich library that provides a straightforward way to create data tables in React. It comes with built-in features such as sorting, pagination, and row selection, making it easy to implement common table functionalities without much boilerplate code. If you are looking for a library that offers a more opinionated approach with ready-to-use components and built-in features, react-data-table-component is an excellent choice.
  • react-table-6 is an earlier version of the popular React Table library. While it shares many of the same features as the latest version, it may lack some of the optimizations and improvements found in the current version. If you are maintaining a legacy project that still uses this version, it may be necessary to continue using react-table-6, but for new projects, it is generally recommended to use the latest version of React Table.
  • react-table-v6 is another variant of the React Table library that emphasizes compatibility with older versions. Similar to react-table-6, it is primarily intended for projects that require backward compatibility. Developers should consider upgrading to the latest version of React Table for better performance and features, but if you are working with an existing codebase that relies on this version, it may still be relevant.

To see how these libraries compare, check out the comparison: Comparing react-data-table-component vs react-table vs react-table-6.

README for @ant-design/pro-table

@ant-design/pro-table

ProTable was created to solve the problem of having to write a lot of sample code for tables in a project, so a lot of common logic was encapsulated in it. These wrappers can be simply categorized as pre-defined behaviors and pre-defined logic.

ProTable puts a layer of wrapping on top of antd's Table, supports some presets, and encapsulates some behaviors. Only api's that differ from antd Table are listed here.

request

request is the most important API of ProTable, request takes an object. The object must have data and success in it, and total is also required if manual paging is needed. request takes over the loading settings and re-executes them when the query form is queried and the params parameters are modified. Also the query form values and params parameters are brought in. The following is an example.

<ProTable<DataType, Params>
  // params is a parameter that needs to be self-contained
  // This parameter has higher priority and will override the parameters of the query form
  params={params}
  request={async (
    // The first parameter params is the combination of the query form and params parameters
    // The first parameter will always have pageSize and current, which are antd specifications
    params: T & {
      pageSize: number;
      current: number;
    },
    sort,
    filter,
  ) => {
    // Here you need to return a Promise, and you can transform the data before returning it
    // If you need to transform the parameters you can change them here
    const msg = await myQuery({
      page: params.current,
      pageSize: params.pageSize,
    });
    return {
      data: msg.result,
      // Please return true for success.
      // otherwise the table will stop parsing the data, even if there is data
      success: boolean,
      // not passed will use the length of the data, if it is paged you must pass
      total: number,
    };
  }}
/>

ProTable

PropertyDescriptionTypeDefault Value
requestHow to get dataSource(params?: {pageSize,current},sort,filter) => {data,success,total}-
paramsAdditional parameters used for request query, once changed will trigger reloadingobject-
postDataProcess the data obtained through request(data: T[]) => T[]-
defaultDataDefault dataT[]-
dataSourceTable data, protable recommends using request to loadT[]-
onDataSourceChangeTriggered when Table data changes(dataSource: T[]) => void-
actionRefReference to Table action for custom triggeringMutableRefObject<ActionType>-
formRefThe form instance of the query form can be obtained for some flexible configurationMutableRefObject<FormInstance>-
toolBarRenderRender toolbar, support returning a dom array, will automatically increase margin-right(action) => ReactNode[]-
onLoadTriggered after the data is loaded, it will be triggered multiple times(dataSource: T[]) => void-
onLoadingChangeTriggered when loading is modified, usually caused by network requests(loading:boolean)=>void-
onRequestErrorTriggered when data loading fails(error) => void-
tableClassNameclassName of the encapsulated tablestring-
tableStylestyle of the encapsulated tableCSSProperties-
optionstable toolbar, not displayed when set to false{{ density?: boolean, fullScreen?: boolean | function, reload?: boolean | function, reloadIcon?: React.ReactNode, densityIcon?: React.ReactNode, setting?: boolean | SettingOptionType }}{ fullScreen: false, reload :true, density: true, setting: true}
searchWhether to display the search form, when the object is passed in, it is the configuration of the search formfalse | SearchConfig-
dateFormatterConvert moment format data to a specific type, false will not be converted"string" | "number" | ((value: Moment, valueType: string) => string | number) |false"string"
defaultSizeDefault sizeSizeType-
beforeSearchSubmitMake some changes before searching(params:T)=>T-
onSizeChangeThe table size has changed(size:'default' |'middle' |'small') => void-
typepro-table type"form"-
formantd form configurationFormProps-
onSubmitTriggered when the form is submitted(params: U) => void-
onResetTriggered when the form is reset() => void-
columnEmptyTextDisplay when it is empty, display - when it is not set, false can turn off this functionstring | falsefalse
tableRenderCustom rendering table function(props,dom,domList:{ toolbar,alert,table}) => ReactNode-
toolbarTransparent transmission of ListToolBar configuration itemsListToolBarProps-
tableExtraRenderThe main function of the custom table(props: ProTableProps<T, U>, dataSource: T[]) => ReactNode;-
manualRequestDo you need to manually trigger the first request? When configured as true, the search form cannot be hiddenbooleanfalse
editableRelated configuration of editable tableTableRowEditable-
cardBorderedBorder of Card components around Table and Searchboolean | {search?: boolean, table?: boolean}false
ghostGhost mode, that is, whether to cancel the padding of the table content area.booleanfalse
debounceTimeDebounce timenumber10
revalidateOnFocusAutomatically re-request when the window is focusedbooleanfalse
columnsStateColumn Status Control, you can operate the display hideColumnStateType-

RecordCreator

PropertyDescriptionTypeDefault Value
recordThe row data to be added, generally contains a unique keyT{}
positionWhere does the line increase, start or endtop | bottombottom
(...buttonProps)ButtonProps of antdButtonProps—

ColumnStateType

PropertyDescriptionTypeDefault
defaultValueThe default value of the column status, only for the first time. Used for resetting valueRecord <string, ColumnsState>;
valueColumn status, support controlled modeRecord <string, ColumnsState>;
onChangeColumn status After changing(value: Record <string, ColumnsState>) => void
PersistenceKeyThe key of the persistence column is used to determine if it is the same tablestring | Number
PersistenceTypeThe type of persistence column, localStorage is also existing after closing the browser, sessionStorage closes the browser will be lostlocalStorage | sessionStorage

Search Search form

PropertyDescriptionTypeDefault Value
filterTypeFilter form type'query' | 'light''query'
searchTextSearch button textstringSearch
resetTextreset button textstringreset
submitTextThe text of the submit buttonstringSubmit
labelWidthLabel width'number' | 'auto'80
spanConfigure the number of columns in the query form'number' | 'ColConfig'defaultColConfig
classNameEncapsulated search Form classNamestring-
collapseRenderCollapse button render((collapsed: boolean,showCollapseButton?: boolean) => ReactNode)|false-
defaultCollapsedWhether to collapse by defaultbooleantrue
collapsedcollapsedboolean-
onCollapseCollapse button event(collapsed: boolean) => void;-
optionRenderCustom action bar((searchConfig,formProps,dom) => ReactNode[])|false-
showHiddenNumWhether to show the number of hidden items after storingbooleanfalse

editable edit line configuration

PropertyDescriptionTypeDefault Value
typeType of editable table, single or multiplesingle | multiple-
formForm instance of editable form, use Form.useForm to generate and useFormInstance-
formPropsform properties can be configured, but onFinish is not supported`FormProps'-
editableKeysRow being edited, controlled attributes. The defaultkey will use the configuration of rowKey,if there is no configuration, it will use theindex, it is recommended to use rowKeyKey[]-
onChangeTriggered when row data is modified(editableKeys: Key[], editableRows: T[]) => void-
onSaveTriggered when a row is saved(key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<any>-
saveTextText for saving a rowReact.ReactNodeSave
onDeleteTriggered when a row is deleted(key: Key, row: T) => Promise<any>-
deleteTextText for deleting a rowReact.ReactNodeDelete
onCancelTriggered when cancel editing a line(key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<any>-
cancelTextText for canceling the editing of a rowReact.ReactNodeCancel
actionRenderCustom edit mode action bar(row: T, config: ActionRenderConfig<T>) => ReactNode[]-
deletePopconfirmMessageThe pop-up confirmation box prompt message when deletingReactNodeDelete this line?
onlyOneLineEditorAlertMessageOnly one line can be editedReactNodeOnly one line can be edited at the same time
onlyAddOneLineAlertMessageOnly one line can be added at the same timeReactNodeOnly add one line

ColConfig

const defaultColConfig = {
  xs: 24,
  sm: 24,
  md: 12,
  lg: 12,
  xl: 8,
  xxl: 6,
};

Install

Using npm:

$ npm install --save  @ant-design/pro-table

or using yarn:

$ yarn add @ant-design/pro-table
npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.