mirror of
https://github.com/gosticks/react-table.git
synced 2026-06-28 17:10:01 +00:00
Demo
This commit is contained in:
Tanner Linsley
@@ -1,4 +1,4 @@
|
||||
import { Render } from 'jumpsuit'
|
||||
import App from 'screens/index'
|
||||
|
||||
Render(App)
|
||||
Render(null, <App />)
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// -----------------------------------------------------------------------------
|
||||
// styles
|
||||
// Globals
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,600')
|
||||
@@ -7,14 +7,17 @@
|
||||
|
||||
global-reset()
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// vendor styles
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@import '../node_modules/react-table/react-table.css'
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// variables
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
$fnt-open-sans = 'Open Sans', sans-serif
|
||||
$clr-white = #FFFFFF
|
||||
$clr-off-white = #F5F5F5
|
||||
$clr-gray = #bfbfbf
|
||||
$clr-jumpsuit1 = #003952
|
||||
$clr-jumpsuit2 = #005275
|
||||
$clr-jumpsuit3 = #0082bb
|
||||
@@ -32,102 +35,36 @@ html
|
||||
body
|
||||
background $clr-jumpsuit1
|
||||
background radial-gradient(ellipse at center, $clr-jumpsuit2 0%, $clr-jumpsuit1 100%)
|
||||
color $clr-white
|
||||
font-family $fnt-open-sans
|
||||
font-weight 300
|
||||
padding-bottom: 50px
|
||||
|
||||
h1
|
||||
font-size: 2.5em
|
||||
color: white
|
||||
|
||||
a
|
||||
color: white
|
||||
font-weight: bold
|
||||
|
||||
strong
|
||||
font-weight: bold
|
||||
|
||||
.container
|
||||
display flex
|
||||
justify-content space-between
|
||||
padding 0 10px
|
||||
section
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
flex-direction column
|
||||
width 50%
|
||||
height 100vh
|
||||
text-align center
|
||||
position relative
|
||||
&:first-child:after
|
||||
content ''
|
||||
background $clr-jumpsuit1
|
||||
position absolute
|
||||
right 0
|
||||
top: 50%
|
||||
transform: translateY(-50%)
|
||||
width 1px
|
||||
height 90%
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
justify-content: center
|
||||
min-height: 100vh
|
||||
padding-top: 20px
|
||||
|
||||
.logo
|
||||
width 150px
|
||||
margin 0 auto 30px
|
||||
img
|
||||
width 100%
|
||||
.github-addon
|
||||
font-size: 20px
|
||||
color:white
|
||||
padding: 10px
|
||||
|
||||
.title
|
||||
font-size 40px
|
||||
font-weight 300
|
||||
margin-bottom 10px
|
||||
|
||||
.subtitle
|
||||
font-size 16px
|
||||
opacity .6
|
||||
letter-spacing 1px
|
||||
|
||||
.github
|
||||
width 100%
|
||||
max-width 480px
|
||||
padding 0 30px
|
||||
margin-top 50px
|
||||
|
||||
.inpt
|
||||
border none
|
||||
font-family $fnt-open-sans
|
||||
font-size 14px
|
||||
font-weight 600
|
||||
padding 12px 20px
|
||||
width 300px
|
||||
text-align center
|
||||
border-radius 4px
|
||||
outline none
|
||||
width 100%
|
||||
|
||||
.usr
|
||||
background $clr-off-white
|
||||
color $clr-jumpsuit1
|
||||
box-shadow 0 2px 7px rgba(0, 0, 0, .4)
|
||||
text-align left
|
||||
border 1px solid $clr-jumpsuit3
|
||||
border-radius 4px
|
||||
padding 10px
|
||||
margin-top 20px
|
||||
width 100%
|
||||
|
||||
.usr-avatar
|
||||
display inline-block
|
||||
float left
|
||||
margin-right 10px
|
||||
img
|
||||
width 100px
|
||||
|
||||
.usr-info
|
||||
font-size 14px
|
||||
width 280px
|
||||
td
|
||||
padding 3px 5px
|
||||
vertical-align top
|
||||
&:first-child
|
||||
width 100px
|
||||
font-weight 600
|
||||
|
||||
.usr-none
|
||||
text-align center
|
||||
color $clr-gray
|
||||
|
||||
@media (max-width: 720px)
|
||||
.container
|
||||
flex-direction column
|
||||
justify-content center
|
||||
section
|
||||
width 100%
|
||||
.table-wrap
|
||||
background: white
|
||||
width: 700px
|
||||
padding: 10px
|
||||
border-radius: 5px
|
||||
|
||||
@@ -8,5 +8,6 @@
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="/app.js"></script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,15 +1,62 @@
|
||||
import { Component } from 'jumpsuit'
|
||||
import _ from 'lodash'
|
||||
import namor from 'namor'
|
||||
|
||||
import ReactTable from 'react-table'
|
||||
|
||||
export default Component({
|
||||
render () {
|
||||
const data = _.map(_.range(5000), d => {
|
||||
return {
|
||||
firstName: namor.generate({ words: 1, numLen: 0 }),
|
||||
lastName: namor.generate({ words: 1, numLen: 0 }),
|
||||
age: Math.floor(Math.random() * 30)
|
||||
}
|
||||
})
|
||||
|
||||
const columns = [{
|
||||
header: 'First Name',
|
||||
accessor: 'firstName'
|
||||
}, {
|
||||
header: 'Last Name',
|
||||
accessor: 'lastName'
|
||||
}, {
|
||||
header: 'Age',
|
||||
accessor: 'age'
|
||||
}]
|
||||
|
||||
return (
|
||||
<div className='container'>
|
||||
<ReactTable
|
||||
data={[]}
|
||||
columns={[]}
|
||||
/>
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<h1>react-table <strong>demo</strong></h1>
|
||||
<br />
|
||||
<div>
|
||||
<a
|
||||
className='github-button'
|
||||
href='https://github.com/tannerlinsley/react-table'
|
||||
data-icon='octicon-star'
|
||||
data-style='mega'
|
||||
data-count-href='/tannerlinsley/react-table/stargazers'
|
||||
data-count-api='/repos/tannerlinsley/react-table#stargazers_count'
|
||||
data-count-aria-label='# stargazers on GitHub'
|
||||
aria-label='Star tannerlinsley/react-table on GitHub'>
|
||||
Star
|
||||
</a>
|
||||
</div>
|
||||
<div className='github-addon'>
|
||||
<a href='https://github.com/tannerlinsley/react-table'>
|
||||
View on Github
|
||||
</a>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
<div className='table-wrap'>
|
||||
<ReactTable
|
||||
data={data}
|
||||
columns={columns}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user