react实现react-data-components table表格排序搜索分页效果代码

代码语言:html

所属分类:表格

代码描述:react实现react-data-components table表格排序搜索分页效果代码

代码标签: react react-data-components 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.3.3.7.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome.3.2.0.css">
<style>
.table th {
  cursor: pointer;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.table .empty-cell {
  font-style: italic;
  color: darkgray;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.sort-icon:after {
  float: right;
  color: hsl(20, 0%, 70%);
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.sort-icon.sort-ascending:after  { content: '\f0de'; }
.sort-icon.sort-descending:after { content: '\f0dd'; }
.sort-icon.sort-none:after  { content: '\f0dc'; }
</style>


</head>

<body>
<div id="root"></div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script>
<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 type="tex.........完整代码请登录后点击上方下载按钮下载查看

网友评论0