如何解决我正在使用制表符,是什么导致数据不出现在列中?
我的数据显示如下。有数据,可以按列排序,但显示为一长行,没有垂直列。我相信
这是我的index.js和我的HTML。 我很迷茫。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
//import 'tabulator-tables';
/*
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,document.getElementById('root')
);
*/
var Tabulator = require('tabulator-tables');
var tabledata = [
{ id: 1,name: "Billy Bob",age: 12},{ id: 2,name: "Jenny Jane",age: 42 },{ id: 3,name: "Steve McAlistaire",age: 35 },];
//define table
var table = new Tabulator("#example-table",{
data: tabledata,autoColumns: true,// columns: [{ title: "Name",field: "name" },//{ title: "Age",field: "age" } ]
});
table.setData(tabledata);
serviceWorker.unregister();
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<Meta name="viewport" content="width=device-width,initial-scale=1" />
<Meta name="theme-color" content="#000000" />
<Meta name="description" content="Web site created using create-react-app" />
<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
<title>Metric React test</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="example-table"></div>
</body>
</html>
解决方法
看起来您缺少表格的CSS。
样式表的链接看起来不正确dist/css/tabulator.min.css
指向相对于当前页面的dist文件夹,这是存储文件的奇怪位置。它应该是相对于网站根目录的路径。
如果您使用JS中的tabulator.js
语句导入脚本,则无需在HTML中包含import
的脚本标签
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。