beautify table-list
authorHongyuan Ma <CS_MaleicAcid@163.com>
Thu, 31 May 2018 15:46:30 +0000 (23:46 +0800)
committerHongyuan Ma <CS_MaleicAcid@163.com>
Thu, 31 May 2018 15:46:30 +0000 (23:46 +0800)
front-end/src/index.html
front-end/src/util/basic-table/index.css
front-end/src/util/basic-table/index.jsx
front-end/src/util/table-list/index.css
front-end/src/util/table-list/index.jsx

index eabb3cb8c5d6d7af402689e609f295ea276997f3..a7b7ac7eefc6361e87ede9285c670c792a0c2df9 100644 (file)
@@ -16,7 +16,7 @@
 
     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
+    <!--<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>-->
     <body>
         <div id="app"></div>
     </body>
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..f8c930f454c4048f0e3b8601ecd65190cf802634 100644 (file)
@@ -0,0 +1,11 @@
+.ReactTable .rt-th{
+    background-color: #ffffff;
+}
+
+.ReactTable .-pagination{
+    background-color: #ffffff;
+}
+
+.ReactTable .rt-tr-group:nth-child(2n) {
+    background-color: #ffffff;
+}
\ No newline at end of file
index b3cceb10232a0a1e67e8dcad75ced2a81b1d0375..ff68322bd27e3e5f225189190f9b4f98258e186e 100644 (file)
@@ -21,6 +21,55 @@ class BasicTable extends React.Component {
                 name: 'Jason Maurer',
                 age: 23,
             }
+        },{
+            name: 'Tanner Linsley',
+            age: 26,
+            friend: {
+                name: 'Jason Maurer',
+                age: 23,
+            }
+        },{
+            name: 'Tanner Linsley',
+            age: 26,
+            friend: {
+                name: 'Jason Maurer',
+                age: 23,
+            }
+        },{
+            name: 'Tanner Linsley',
+            age: 26,
+            friend: {
+                name: 'Jason Maurer',
+                age: 23,
+            }
+        },{
+            name: 'Tanner Linsley',
+            age: 26,
+            friend: {
+                name: 'Jason Maurer',
+                age: 23,
+            }
+        },{
+            name: 'Tanner Linsley',
+            age: 26,
+            friend: {
+                name: 'Jason Maurer',
+                age: 23,
+            }
+        },{
+            name: 'Tanner Linsley',
+            age: 26,
+            friend: {
+                name: 'Jason Maurer',
+                age: 23,
+            }
+        },{
+            name: 'Tanner Linsley',
+            age: 26,
+            friend: {
+                name: 'Jason Maurer',
+                age: 23,
+            }
         }]
 
         const columns = [{
@@ -39,7 +88,7 @@ class BasicTable extends React.Component {
                 accessor: 'friend.age'
             }]
         return (
-            <ReactTable className="ReactTable" data = {data} columns = {columns}/>
+            <ReactTable className="ReactTable -striped -highlight" data = {data} columns = {columns}/>
         );
 
     }
index 3206f4792c4390082e778723610f95b5c45969eb..4bb48baa1a63d63c9ec79710edf38288b5db8a60 100644 (file)
@@ -1,4 +1,8 @@
 .table th, .table td {
     text-align: center;
     vertical-align: middle!important;
+}
+
+.table {
+    background-color: #fff;
 }
\ No newline at end of file
index 8ec5ac6bc45fd8e106e29c1f0f77b8e8b8a70aa3..d967503d1cd44a73fe0e2733bd1a104b0074fdee 100644 (file)
@@ -41,7 +41,7 @@ class TableList extends React.Component {
         return (
             <div className="row">
                 <div className="col-md-12">
-                    <table className="table table-striped table-bordered">
+                    <table className="table table-striped table-hover table-condensed">
                         <thead>
                         <tr>
                             {tableHeader}
@@ -49,6 +49,7 @@ class TableList extends React.Component {
                         </thead>
                         <tbody>
                         {tableBody}
+
                         </tbody>
                     </table>
                 </div>