react编写一个表格组件实现table表格效果代码-html代码-BFW代码库

react编写一个表格组件实现table表格效果代码

代码语言：html

所属分类：表格

代码描述：react编写一个表格组件实现table表格效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
 

</head>
<body>



    <div id=table-component>
        Loading...
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.15.4.2.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.15.4.2.js"></script>
    <script>
        var TableComponent = React.createClass({
            displayName: "TableComponent",
            render: function () {
                // Data
                var dataColumns = this.props.data.columns;
                var dataRows = this.props.data.rows;

                var tableHeaders = /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/
                    React.createElement("tr", null,
                        dataColumns.map(function (column) {
                            return /*#__PURE__*/React.createElement("th", null, column);
                        })));



                var tableBody = dataRows.map(function (row) {
                    return /*#__PURE__*/(
                        React.createElement("tr", null,
                            dataColumns.map(function (column) {
                                return /*#__PURE__*/React.createElement("td", null, row[column]);
                            })));
                });

                // Decorate with Bootstrap CSS
                return /*#__PURE__*/React.createElement("table", {
                    className: "table table-bordered table-hover", width: "100%"
                },
                    tableHeaders,
                    tableBody);
            }
        });


        // Example Data
        var tableData = {
            columns: ['Service',
                'Cost/Unit',
                'Unit',
                'Units Requested'],
            rows: [{
                'Service': 'Veterinary Assitance',
                'Cost/Unit': 50,
                'Unit': '1 Hour',
                'Units Requested': 12
            },
                {
                    'Service': 'Veterinary Assitance',
      .........完整代码请登录后点击上方下载按钮下载查看