mirror of
https://github.com/gosticks/react-table.git
synced 2025-10-16 11:55:36 +00:00
Demo
This commit is contained in:
Tanner Linsley
parent
f13c9c3546
commit
736e6de7cc
158
example/dist/app.css
vendored
158
example/dist/app.css
vendored
File diff suppressed because one or more lines are too long
58413
example/dist/app.js
vendored
58413
example/dist/app.js
vendored
File diff suppressed because one or more lines are too long
1
example/dist/index.html
vendored
1
example/dist/index.html
vendored
@ -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>
|
||||
|
||||
@ -14,11 +14,13 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"nib": "^1.1.0",
|
||||
"standard": "^8.4.0",
|
||||
"stylus": "^0.54.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.13.1",
|
||||
"jumpsuit": "^0.7.5",
|
||||
"lodash": "^4.14.1"
|
||||
"lodash": "^4.16.4",
|
||||
"namor": "^0.3.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
7
react-table.js
vendored
7
react-table.js
vendored
File diff suppressed because one or more lines are too long
109
src/index.js
109
src/index.js
@ -1,7 +1,15 @@
|
||||
import React from 'react'
|
||||
import classnames from 'classnames'
|
||||
//
|
||||
import _ from './lodash'
|
||||
const _ = {
|
||||
get,
|
||||
takeRight,
|
||||
last,
|
||||
orderBy,
|
||||
range,
|
||||
clone,
|
||||
remove
|
||||
}
|
||||
|
||||
const defaultButton = (props) => (
|
||||
<button {...props} className='-btn'>{props.children}</button>
|
||||
@ -23,7 +31,7 @@ export const ReactTableDefaults = {
|
||||
}
|
||||
}
|
||||
|
||||
export default React.component({
|
||||
export default React.createClass({
|
||||
getDefaultProps () {
|
||||
return ReactTableDefaults
|
||||
},
|
||||
@ -366,21 +374,21 @@ export default React.component({
|
||||
},
|
||||
sortColumn (column, additive) {
|
||||
const existingSorting = this.state.sorting || []
|
||||
const sorting = _.clone(this.state.sorting || [])
|
||||
let sorting = _.clone(this.state.sorting || [])
|
||||
const existingIndex = sorting.findIndex(d => d.id === column.id)
|
||||
if (existingIndex > -1) {
|
||||
const existing = sorting[existingIndex]
|
||||
if (existing.asc) {
|
||||
existing.asc = false
|
||||
if (!additive) {
|
||||
_.remove(sorting, d => d)
|
||||
sorting.push(existing)
|
||||
sorting = [existing]
|
||||
}
|
||||
} else {
|
||||
if (additive) {
|
||||
sorting.splice(existingIndex, 1)
|
||||
} else {
|
||||
existing.asc = true
|
||||
sorting = [existing]
|
||||
}
|
||||
}
|
||||
} else {
|
||||
@ -390,14 +398,13 @@ export default React.component({
|
||||
asc: true
|
||||
})
|
||||
} else {
|
||||
_.remove(sorting, d => d)
|
||||
sorting.push({
|
||||
sorting = [{
|
||||
id: column.id,
|
||||
asc: true
|
||||
})
|
||||
}]
|
||||
}
|
||||
}
|
||||
const page = (existingIndex === 0 || (!existingSorting.length && sorting.length)) ? 0 : this.state.page
|
||||
const page = (existingIndex === 0 || (!existingSorting.length && sorting.length) || !additive) ? 0 : this.state.page
|
||||
this.buildData(this.props, Object.assign({}, this.state, {page, sorting}))
|
||||
},
|
||||
nextPage (e) {
|
||||
@ -409,3 +416,87 @@ export default React.component({
|
||||
this.setPage(this.state.page - 1)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
// ########################################################################
|
||||
// Utils
|
||||
// ########################################################################
|
||||
|
||||
|
||||
function remove (a, b) {
|
||||
return a.filter(function (o, i) {
|
||||
var r = b(o)
|
||||
if (r) {
|
||||
a.splice(i, 1)
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
}
|
||||
|
||||
function get (a, b) {
|
||||
if (isArray(b)) {
|
||||
b = b.join('.')
|
||||
}
|
||||
return b
|
||||
.replace('[', '.').replace(']', '')
|
||||
.split('.')
|
||||
.reduce(
|
||||
function (obj, property) {
|
||||
return obj[property]
|
||||
}, a
|
||||
)
|
||||
}
|
||||
|
||||
function takeRight (arr, n) {
|
||||
const start = n > arr.length ? 0 : arr.length - n
|
||||
return arr.slice(start)
|
||||
}
|
||||
|
||||
function last (arr) {
|
||||
return arr[arr.length - 1]
|
||||
}
|
||||
|
||||
function range (n) {
|
||||
const arr = []
|
||||
for (let i = 0; i < n; i++) {
|
||||
arr.push(n)
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
function orderBy (arr, funcs, dirs) {
|
||||
return arr.sort((a, b) => {
|
||||
for (let i = 0; i < funcs.length; i++) {
|
||||
const comp = funcs[i]
|
||||
const ca = comp(a)
|
||||
const cb = comp(b)
|
||||
const desc = dirs[i] === false || dirs[i] === 'desc'
|
||||
if (ca > cb) {
|
||||
return desc ? -1 : 1
|
||||
}
|
||||
if (ca < cb) {
|
||||
return desc ? 1 : -1
|
||||
}
|
||||
}
|
||||
return 0
|
||||
})
|
||||
}
|
||||
|
||||
function clone (a) {
|
||||
return JSON.parse(JSON.stringify(a, function (key, value) {
|
||||
if (typeof value === 'function') {
|
||||
return value.toString()
|
||||
}
|
||||
return value
|
||||
}))
|
||||
}
|
||||
|
||||
// ########################################################################
|
||||
// Helpers
|
||||
// ########################################################################
|
||||
|
||||
function isArray (a) {
|
||||
return Array.isArray(a)
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
@import 'nib'
|
||||
|
||||
$easeOutQuad = cubic-bezier(0.250, 0.460, 0.450, 0.940)
|
||||
$easeOutBack = cubic-bezier(0.175, 0.885, 0.320, 1.275)
|
||||
|
||||
.ReactTable
|
||||
position:relative
|
||||
@ -86,7 +87,7 @@ $easeOutQuad = cubic-bezier(0.250, 0.460, 0.450, 0.940)
|
||||
font-weight:500
|
||||
color: $darkColor
|
||||
border-right: 1px solid alpha(black, .05)
|
||||
transition box-shadow .3s easeOutBack
|
||||
transition box-shadow .3s $easeOutBack
|
||||
box-shadow:inset 0 0 0 0 transparent
|
||||
&.sort-asc
|
||||
box-shadow:inset 0 3px 0 0 alpha(black, .6)
|
||||
@ -133,6 +134,8 @@ $easeOutQuad = cubic-bezier(0.250, 0.460, 0.450, 0.940)
|
||||
color: alpha(black, .6)
|
||||
background: alpha(black, .1)
|
||||
transition: all .1s ease
|
||||
cursor: pointer
|
||||
outline:none
|
||||
|
||||
&[disabled]
|
||||
opacity: .5
|
||||
@ -182,7 +185,7 @@ $easeOutQuad = cubic-bezier(0.250, 0.460, 0.450, 0.940)
|
||||
font-size: 15px
|
||||
color: alpha(black, .6)
|
||||
transform: translateY(-52%)
|
||||
transition: .3s $easeOutQuad
|
||||
transition: all .3s $easeOutQuad
|
||||
|
||||
&.-active
|
||||
opacity: 1
|
||||
|
||||
@ -1,85 +0,0 @@
|
||||
export default {
|
||||
get,
|
||||
takeRight,
|
||||
last,
|
||||
orderBy,
|
||||
range,
|
||||
clone,
|
||||
remove
|
||||
}
|
||||
|
||||
function remove (a, b) {
|
||||
return a.filter(function (o, i) {
|
||||
var r = b(o)
|
||||
if (r) {
|
||||
a.splice(i, 1)
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
}
|
||||
|
||||
function get (a, b) {
|
||||
if (isArray(b)) {
|
||||
b = b.join('.')
|
||||
}
|
||||
return b
|
||||
.replace('[', '.').replace(']', '')
|
||||
.split('.')
|
||||
.reduce(
|
||||
function (obj, property) {
|
||||
return obj[property]
|
||||
}, a
|
||||
)
|
||||
}
|
||||
|
||||
function takeRight (arr, n) {
|
||||
const start = n > arr.length ? 0 : arr.length - n
|
||||
return arr.slice(start)
|
||||
}
|
||||
|
||||
function last (arr) {
|
||||
return arr[arr.length - 1]
|
||||
}
|
||||
|
||||
function range (n) {
|
||||
const arr = []
|
||||
for (let i = 0; i < n; i++) {
|
||||
arr.push(n)
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
function orderBy (arr, funcs) {
|
||||
return arr.sort((a, b) => {
|
||||
for (let i = 0; i < funcs.length; i++) {
|
||||
const comp = funcs[i]
|
||||
const ca = comp(a)
|
||||
const cb = comp(b)
|
||||
if (ca > cb) {
|
||||
return 1
|
||||
}
|
||||
if (ca < cb) {
|
||||
return -1
|
||||
}
|
||||
}
|
||||
return 0
|
||||
})
|
||||
}
|
||||
|
||||
function clone (a) {
|
||||
return JSON.parse(JSON.stringify(a, function (key, value) {
|
||||
if (typeof value === 'function') {
|
||||
return value.toString()
|
||||
}
|
||||
return value
|
||||
}))
|
||||
}
|
||||
|
||||
// ########################################################################
|
||||
// Helpers
|
||||
// ########################################################################
|
||||
|
||||
function isArray (a) {
|
||||
return Array.isArray(a)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user