React list数据显示（含源码）Demo

最新推荐文章于 2024-08-10 07:24:07 发布

也许(Oliver)

最新推荐文章于 2024-08-10 07:24:07 发布

阅读量2.4w

点赞数 2

分类专栏： React 文章标签：数据表格显示 React DetailList的使用数据库读取数据

本文链接：https://blog.csdn.net/linjiru1191/article/details/94573508

版权

本文介绍了如何在React中使用DetailList组件展示数据，详细步骤包括导入必要的库、定义列结构，以及在组件挂载后通过componentDidMount获取数据，数据来源可为静态常量、文件或数据库。

摘要由CSDN通过智能技术生成

主要用到DetailList，具体用法可以参考：office-ui-fabric detaillist,效果图如下：

1.首先import要用到的库

import React, { Component } from 'react';
import { DetailsList} from 'office-ui-fabric-react/lib/DetailsList';

2.定义先要展示出table的column

//定义想要展示的column
const columns = [
    {
        key: 'TenantId',
        name: 'TenantId',
        fieldName: 'TenantId',
        minWidth: 60,
        maxWidth: 110,
        isResizable: true,
        ariaLabel: 'Operations for TenantId'
    },
    {
        key: 'DateTime',
        name: 'DateTime',
        fieldName: