@activewidgets/react 中文文档教程

Question

ActiveWidgets/React • Datagrid

ActiveWidgets 是一个多框架 UI 组件库。 这个包提供了用于 React 的虚拟化数据网格组件。

现场演示 / 开发者指南 / API 参考

• Installation
• Usage
• CDN links
• Data properties
• User events

Installation

添加 @activewidgets/react到您的项目依赖项 -

> npm i --save @activewidgets/react

Usage

现在您可以导入 ActiveWidgets 组件类 -

import { Datagrid } from "@activewidgets/react";

并将它们用作任何标准 React 组件。

import React from "react";
import ReactDOM from "react-dom";
import { Datagrid } from "@activewidgets/react";

const rows = [
    { message: 'Hello, World!' }
];

function App(){
    return <Datagrid rows={rows} />
}

ReactDOM.render(<App />, document.getElementById("app"));

实例 | github 上的源 | 在 Codesandbox 上编辑

CDN links

为了快速制作原型，该包也可通过 ActiveWidgets CDN 获得-

<script src="https://cdn.activewidgets.com/react"></script>

在这种情况下，您将在 ActiveWidgets.React 全局命名空间中找到组件。

var Datagrid = ActiveWidgets.React.Datagrid;

var rows = [
    { framework: 'React', source: 'CDN', language: 'ES5' }
];

var App = React.createElement(Datagrid, { rows: rows });
ReactDOM.render(App, document.getElementById("app"));

实例 | github 上的源 | 在 Codesandbox 上编辑

Data properties

你必须提供 columns 和 rows 数据网格的属性显示一些数据。 每个 column 对象的属性定义了数据的呈现方式 -

• field - where the cell data comes from (string|function)
• header - column header (string|object)
• width - column width (number, in pixels)
• align - cell text alignment (left|right|center)
• format - number/date format (string|function)
• fixed - fixed (true/false) for columns on the left or right side

style（字符串|对象）或 className 属性允许更改样式列和单元格元素。

const columns = [
  {header: 'Code', field: 'customerID', width: 80, style: 'background:#def', fixed: true},
  {header: 'Company Name', field: 'companyName', width: 160},
  {header: 'Contact', field: 'contactName', width: 120},
  {header: 'Title', field: 'contactTitle', width: 120},
  {header: 'Address', field: 'address', width: 120, align: 'right'}
];

const rows = northwind.customers;

function App(){
    return <Datagrid columns={columns} rows={rows} />
}

实例 | github 上的源 | 在 Codesandbox 上编辑

User events

除了数据网格发出的标准 DOM 键盘和鼠标事件合成的 mouse 事件，可以更轻松地找到受用户操作影响的元素 -

function onMouse({row, column}){
    alert(`row ${row.key} clicked!`);
}

function App(){
    return <Datagrid onMouse={onMouse} columns={columns} rows={rows} />
}

实例 | github 上的源 | 在 Codesandbox 上编辑

More info

• Live demo
• Developer guide
• API reference
• Licensing
• Support forum

---