npm 包 @mirzadipradhana/react-data-grid 使用教程

简介

@mirzadipradhana/react-data-grid 是一款基于 React 的开源数据表格组件库。它支持实时排序、筛选、选中、调整列宽、分页等丰富的功能。使用该组件库可以快速构建出美观、高效的数据表格。

安装

使用 npm 安装 @mirzadipradhana/react-data-grid：

--- ------- --------------------------------

或使用 Yarn 安装：

---- --- --------------------------------

使用

基本使用

使用 @mirzadipradhana/react-data-grid 需要引入 Grid、Column、Row 等多个组件，可以使用 import 引入：

------ - ----- ------- --- - ---- -----------------------------------

然后在 render 函数中使用：

-----
  ----------------- -------- --------- ----------- --- ------- ---------- ----------- ----------- ----
  ----------- ------- ------ ------------ --- ---- ------- ------ ---------- ----
--

数据源

@mirzadipradhana/react-data-grid 支持多种数据源的使用方式：

  • 以 props 形式传入；
  • 使用 dataSource 和 columns 属性；
  • 使用 getRowAt、getRowSize、getRowsCount 方法；
  • 使用 ES6 Proxy 对象。

props

  • columns：表格的列数组，元素为 <Column> 组件；
  • rows：表格的行数组，元素为 <Row> 组件；
  • headerRowHeight：表头行高，默认 35；
  • rowHeight：表格行高度，默认 35；
  • minHeight：表格最小高度，默认 350；
  • defaultColumnWidth：默认列宽，默认 120；
  • defaultColumnDef：默认列属性，可以精确控制每一个列组件的 props；
  • rowRenderer：行渲染器；
  • onSelectedRowsChange：选中行变化的回调函数；
  • onSort：排序的回调函数；
  • onFilter：筛选的回调函数。

列组件

Prop 名称 值类型 默认值 描述
key string 必填 列的唯一键
name string 必填 列的名称
width number 必填 列的宽度
sortable boolean true 是否支持排序
filterable boolean true 是否支持筛选
resizable boolean true 是否支持调整列宽
headerCellRenderer ReactElement undefined 自定义表头单元格渲染器，支持插入 JSX 元素等
cellRenderer ReactElement undefined 自定义单元格渲染器，支持插入 JSX 元素等

行组件

Prop 名称 值类型 默认值 描述
key string 必填 行的唯一键
...props 原生 DOM 属性 - 行的其他属性，如 id、className 等

更多配置项请查看官方文档。

数据源使用示例

以 props 形式传入

------ - ----- ------- --- - ---- ----------------------------------

----- ------- - -
  ------- -------- --------- ----------- ---
  ------- ---------- ----------- ----------- --
-

----- ---- - -
  ---- ------- ------ ------------ ---
  ---- ------- ------ ---------- ---
  ---- ------- ------ -------------- ---
  ---- ------- ------ ------------ ---
  ---- ------- ------ ---------- --
-

-------- ----- -
  ------ ----- ----------------- ----------- --
-

------ ------- ---

使用 dataSource 和 columns 属性

------ - ----- ------ - ---- ----------------------------------

----- ---------- - -
  - --- -- ----- ------- --
  - --- -- ----- ----- --
  - --- -- ----- --------- --
  - --- -- ----- ------- --
  - --- -- ----- ----- -
-

----- ------- - -
  ------- -------- --------- ----------- ---
  ------- ---------- ----------- ----------- --
-

-------- ----- -
  ------ ----- ----------------------- ----------------- --
-

------ ------- ---

使用 getRowAt、getRowSize、getRowsCount 方法

------ - ----- ------ - ---- ----------------------------------

-------- ----- -
  ----- -------- - ------- -- -----------------

  ----- ---------- - -- -- --

  ----- ------------ - -- -- -----------------

  ----- ------- - -
    ------- -------- --------- ----------- ---
    ------- ---------- ----------- ----------- --
  -

  ------ -
    -----
      -------------------
      -----------------------
      ---------------------------
      -----------------
    --
  -
-

------ ------- ---

使用 ES6 Proxy 对象

------ - ----- ------ - ---- ----------------------------------

-------- ----- -
  ----- ---------- - -
    - --- -- ----- ------- --
    - --- -- ----- ----- --
    - --- -- ----- --------- --
    - --- -- ----- ------- --
    - --- -- ----- ----- -
  -

  ----- ------- - -
    ------- -------- --------- ----------- ---
    ------- ---------- ----------- ----------- --
  -

  ----- ----- - --- ----------------- -
    ----------- ----- -
      -- ----- --- --------- -
        ------ ------------------- -----
      -

      ----- ----- - ------------
      ------ ------------- - ------------- - - --- ----- - -- ----- -- -
    -
  --

  ------ ----- ------------------ ----------------- --
-

------ ------- ---

小结

@mirzadipradhana/react-data-grid 是一款开源的 React 数据表格组件库，支持多种数据源的使用方式，提供了丰富的配置项，使用简单方便。

以上是 npm 包 @mirzadipradhana/react-data-grid 的使用教程，希望能够帮助到前端开发者快速掌握这款组件库的使用。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066bcc967216659e244782

阅读全文

猜你喜欢

  • npm 包 @nodert-win10/windows.devices.lights 使用教程

    前言 在现代操作系统中，灯光设备已经是不可或缺的了。在 Windows 10 操作系统中，灯光设备也得到了大力的支持，Windows.Devices.Lights 命名空间提供了一系列用于控制灯光设备...

    4 年前
  • npm 包 @nodert-win10/windows.devices.input 使用教程

    什么是 @nodert-win10/windows.devices.input？ @nodert-win10/windows.devices.input 是一个可以在 Node.js 中使用的 npm...

    4 年前
  • npm 包 @nodert-win10/windows.devices.midi 使用教程

    前言 在前端开发中，我们通常会涉及到和 MIDI 设备进行交互的需求。而针对 Windows 平台上的 MIDI 设备，我们可以使用 npm 包 @nodert-win10/windows.devic...

    4 年前
  • npm 包 @nodert-win10/windows.devices.pointofservice 使用教程

    前言 POS(Point of Sale)设备是商店等零售行业的收银工具，POS设备主要包括扫描枪、打印机、显示器等等。在前端开发中，我们经常需要使用POS设备进行收银或者打印等操作，这时候就需要借助...

    4 年前
  • npm 包 @nodert-win10/windows.devices.portable 使用教程

    在前端开发过程中，有时候需要与外部设备进行通信。Windows 系统提供了 Windows.Devices.Portable 命名空间来简化与便携设备（例如 USB 驱动器和可移动存储设备）的交互。

    4 年前
  • npm包 @nodert-win10/windows.devices.power使用教程

    在前端开发中，很多时候我们需要调用一些系统资源或者硬件设备。在Windows10系统上，我们可以通过Node.js的npm包@nodert-win10来访问系统的硬件资源。

    4 年前
  • 在 Angular 中使用响应式表单设置表单控件的值

    Angular 提供了一种强大的方式来处理表单，即使用响应式表单。通过 Angular 的响应式表单，我们可以轻松地管理复杂的表单，包括表单验证、表单状态跟踪以及表单数据的绑定。

    4 年前
  • npm 包 @nodert-win10/windows.devices.smartcards 使用教程

    在前端开发中，常常需要与 USB 设备进行交互。而现在，智能卡的应用也逐渐得到了关注。@nodert-win10/windows.devices.smartcards 是一款 npm 包，可以用于在 ...

    4 年前
  • npm 包 press.min.js 使用教程

    在前端开发中，有许多常用的库可以加速我们的开发效率。其中，press.min.js 是一款使用方便的 npm 包，它能够为我们的页面添加许多有趣的特效。本文将介绍 press.min.js 的基本用法...

    4 年前
  • npm 包 pro.min.js 使用教程

    前言 在前端开发中，我们经常使用到各种各样的库和插件。而 npm 是目前最为流行的 JavaScript 包管理器，提供了大量的开源模块和工具。本文就是要介绍一款非常实用的 npm 包——pro.mi...

    4 年前
  • npm 包 privacy.min.js 使用教程

    简介 在互联网时代，隐私问题越来越受到人们的关注。很多网站和应用程序为了收集用户的信息和数据，设置了各种各样的数据追踪和监控方式。这不仅侵犯了用户的隐私，而且也威胁到用户的安全。

    4 年前
  • npm 包 proc.min.js 使用教程

    proc.min.js 是一款 Node.js 的 npm 包，用于简化 Node.js 子进程的使用，让在 Node.js 环境下开发者可以更加轻松地编写可维护、易读的代码。

    4 年前
  • npm 包 premium.min.js 使用教程

    简介 premium.min.js 是一个基于 jQuery 的插件，用于为网站添加高级特效功能。它包含多种预设效果，可以轻松实现鼠标悬停、点击和页面滚动等动画效果。

    4 年前
  • npm 包 preference.min.js 使用教程

    什么是 preference.min.js preference.min.js 是一个基于 JavaScript 的 npm 包，用于在前端开发中方便地存储和获取用户偏好设置。

    4 年前
  • npm 包 preview.min.js 使用教程

    介绍 preview.min.js 是一个基于 HTML5 的内置预览器，它可以在网页上快速呈现多种文件类型的预览效果，包括PDF、DOC、图片等等。它是一个免费的 npm 包，可以方便地在前端项目中...

    4 年前
  • npm 包 print.min.js 使用教程

    什么是 print.min.js？ print.min.js 是一个基于 jQuery 的强大的打印插件，它可以帮助开发者简单快捷地实现页面打印功能，支持常见的浏览器（包括 IE6+）和系统。

    4 年前
  • npm 包 @nodert-win10/windows.devices.humaninterfacedevice 使用教程

    前言 在 Windows 10 开发中，Human Interface Device（HID）是一种非常重要的设备类型。HID 设备可以通过内置的 USB 或蓝牙接口连接到计算机，并通过各种输入元素（...

    4 年前
  • npm 包 procedure.min.js 使用教程

    在前端开发中，有时候需要将一系列操作按照固定的步骤依次执行。这时候，npm 包 procedure.min.js 就可以派上用场了。它可以帮助我们轻松地管理一个操作流程，而且极易上手。

    4 年前
  • npm 包 process.min.js 使用教程

    介绍 process.min.js 是一个用于前端的 npm 包，用于在浏览器中使用进程相关功能。相比于传统的开发方式，使用 process.min.js 可以减少代码开发时的复杂度及让代码更具可读性...

    4 年前
  • npm 包 profile.min.js 使用教程

    前言 在前端开发中，我们经常需要写一些与用户信息相关的操作。如何快捷、高效地获取用户信息并呈现在页面上是一个需要解决的问题。这时，npm 包 profile.min.js 就为我们提供了便捷的解决方案...

    4 年前

相关推荐

    暂无文章