Skip to content

Commit b15f3ac

Browse files
tannerlinsleytannerlinsley
committed
Added "noData" component
Fixes TanStack#78
1 parent 48ea0df commit b15f3ac

File tree

6 files changed

+123
-8
lines changed

6 files changed

+123
-8
lines changed

‎.storybook/config.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import PivotingSubComponents from '../stories/PivotingSubComponents.js'
2222
import OneHundredKRows from '../stories/OneHundredKRows.js'
2323
import FunctionalRendering from '../stories/FunctionalRendering.js'
2424
import CustomExpanderPosition from '../stories/CustomExpanderPosition.js'
25+
import NoDataText from '../stories/NoDataText.js'
2526
//
2627
configure(() => {
2728
storiesOf('1. Docs')
@@ -49,4 +50,5 @@ configure(() => {
4950
.add('100k Rows w/ Pivoting & Sub Components', OneHundredKRows)
5051
.add('Functional Rendering', FunctionalRendering)
5152
.add('Custom Expander Position', CustomExpanderPosition)
53+
.add('Custom "No Data" Text', NoDataText)
5254
}, module)

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,7 @@ These are all of the available props (and their default values) for the main `<R
187187
getTdProps: () => ({}),
188188
getPaginationProps: () => ({}),
189189
getLoadingProps: () => ({}),
190+
getNoDataProps: () => ({}),
190191

191192
// Global Column Defaults
192193
column: {
@@ -209,6 +210,7 @@ These are all of the available props (and their default values) for the main `<R
209210
previousText: 'Previous',
210211
nextText: 'Next',
211212
loadingText: 'Loading...',
213+
noDataText: 'No rows found',
212214
pageText: 'Page',
213215
ofText: 'of',
214216
rowsText: 'rows',

‎src/index.js

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ export const ReactTableDefaults = {
7070
getTdProps: emptyObj,
7171
getPaginationProps: emptyObj,
7272
getLoadingProps: emptyObj,
73+
getNoDataProps: emptyObj,
7374

7475
// Global Column Defaults
7576
column: {
@@ -92,6 +93,7 @@ export const ReactTableDefaults = {
9293
previousText: 'Previous',
9394
nextText: 'Next',
9495
loadingText: 'Loading...',
96+
noDataText: 'No rows found',
9597
pageText: 'Page',
9698
ofText: 'of',
9799
rowsText: 'rows',
@@ -139,7 +141,8 @@ export const ReactTableDefaults = {
139141
{loadingText}
140142
</div>
141143
</div>
142-
)
144+
),
145+
NoDataComponent: _.makeTemplateComponent('rt-noData')
143146
}
144147

145148
export default React.createClass({
@@ -272,10 +275,12 @@ export default React.createClass({
272275
getTdProps,
273276
getPaginationProps,
274277
getLoadingProps,
278+
getNoDataProps,
275279
showPagination,
276280
expanderColumnWidth,
277281
manual,
278282
loadingText,
283+
noDataText,
279284
// State
280285
loading,
281286
pageSize,
@@ -299,6 +304,7 @@ export default React.createClass({
299304
PaginationComponent,
300305
LoadingComponent,
301306
SubComponent,
307+
NoDataComponent,
302308
// Data model
303309
resolvedData,
304310
allVisibleColumns,
@@ -835,6 +841,7 @@ export default React.createClass({
835841
const tBodyProps = _.splitProps(getTbodyProps(finalState, undefined, undefined, this))
836842
const paginationProps = _.splitProps(getPaginationProps(finalState, undefined, undefined, this))
837843
const loadingProps = getLoadingProps(finalState, undefined, undefined, this)
844+
const noDataProps = getNoDataProps(finalState, undefined, undefined, this)
838845
return (
839846
<div
840847
className={classnames(
@@ -880,6 +887,13 @@ export default React.createClass({
880887
{...paginationProps.rest}
881888
/>
882889
)}
890+
{!pageRows.length && (
891+
<NoDataComponent
892+
{...noDataProps}
893+
>
894+
{_.normalizeComponent(noDataText)}
895+
</NoDataComponent>
896+
)}
883897
<LoadingComponent
884898
loading={loading}
885899
loadingText={loadingText}

‎src/index.styl

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,18 @@ $expandSize = 7px
170170
.-pageSizeOptions
171171
margin: 3px 10px
172172

173+
.rt-noData
174+
display:block
175+
position:absolute
176+
left:50%
177+
top:50%
178+
transform: translate(-50%, -50%)
179+
background: alpha(white, .8)
180+
transition: all .3s ease
181+
z-index: 1
182+
pointer-events: none
183+
padding: 20px
184+
color: alpha(black, .5)
173185

174186
.-loading
175187
display:block

‎stories/NoDataText.js

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React from 'react'
2+
import _ from 'lodash'
3+
import namor from 'namor'
4+
5+
import CodeHighlight from './components/codeHighlight'
6+
import ReactTable from '../src/index'
7+
8+
export default () => {
9+
const data = _.map(_.range(5553), d => {
10+
return {
11+
firstName: namor.generate({ words: 1, numLen: 0 }),
12+
lastName: namor.generate({ words: 1, numLen: 0 }),
13+
age: Math.floor(Math.random() * 30)
14+
}
15+
})
16+
17+
const columns = [{
18+
header: 'Name',
19+
columns: [{
20+
header: 'First Name',
21+
accessor: 'firstName'
22+
}, {
23+
header: 'Last Name',
24+
id: 'lastName',
25+
accessor: d => d.lastName
26+
}]
27+
}, {
28+
header: 'Info',
29+
columns: [{
30+
header: 'Age',
31+
accessor: 'age'
32+
}]
33+
}]
34+
35+
return (
36+
<div>
37+
<div className='table-wrap'>
38+
<ReactTable
39+
className='-striped -highlight'
40+
data={[]}
41+
noDataText='Oh Noes!'
42+
// noDataText={() => 'Oh Noes!'} // Supports functions
43+
// noDataText={() => <span>Oh Noes!</span>} // Supports JSX / React Components
44+
columns={columns}
45+
defaultPageSize={10}
46+
/>
47+
</div>
48+
<div style={{textAlign: 'center'}}>
49+
<br />
50+
<em>Tip: Hold shift when sorting to multi-sort!</em>
51+
</div>
52+
<CodeHighlight>{() => getCode()}</CodeHighlight>
53+
</div>
54+
)
55+
}
56+
57+
function getCode () {
58+
return `
59+
import ReactTable from 'react-table'
60+
61+
// Create some column definitions
62+
const columns = [{
63+
header: 'Name',
64+
columns: [{
65+
header: 'First Name',
66+
accessor: 'firstName'
67+
}, {
68+
header: 'Last Name',
69+
id: 'lastName',
70+
accessor: d => d.lastName
71+
}]
72+
}, {
73+
header: 'Info',
74+
columns: [{
75+
header: 'Age',
76+
accessor: 'age'
77+
}]
78+
}]
79+
80+
// Display your table!
81+
return (
82+
<ReactTable
83+
data={[]}
84+
noDataText='Oh Noes!'
85+
// noDataText={() => 'Oh Noes!'} // Supports functions
86+
// noDataText={() => <span>Oh Noes!</span>} // Supports JSX / React Components
87+
columns={columns}
88+
defaultPageSize={10}
89+
/>
90+
)
91+
`
92+
}

‎stories/Simple.js

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,6 @@ export default () => {
4040
data={data}
4141
columns={columns}
4242
defaultPageSize={10}
43-
getTdProps={() => {
44-
return {
45-
onClick: () => {
46-
console.log('clicked')
47-
}
48-
}
49-
}}
5043
/>
5144
</div>
5245
<div style={{textAlign: 'center'}}>

0 commit comments

Comments
 (0)