Skip to content

Commit 84ac6f5

Browse files
easeqeaseq
committed
Added empty table message
1 parent 21535fc commit 84ac6f5

File tree

4 files changed

+73
-32
lines changed

4 files changed

+73
-32
lines changed

‎README.md‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
5252
rowHeight: 50,
5353
editing: false,
5454
primaryKey: 'id',
55+
noResultsMessage: 'No row(s) found',
5556
routes: { // You can add other routes and handle them using custom actions.
5657
get: { // The route used to fetch data and it's params
5758
route: '/{your_route}',
@@ -350,17 +351,18 @@ const YourComponent = () =>
350351

351352
### Table config props
352353

353-
| Key | Type | Required | Default | Description |
354-
| ---------- | ------- | -------- | ------- | ------------------------------------------------------------------------------------------------ |
355-
| name | string | true | - | key in the row data whose value needs to be loaded for the column (does not have to be unique) |
356-
| height | integer | true | - | The maximum height of the table |
357-
| rowHeight | integer | true | - | The maximum height of each table body row |
358-
| routes | object | true | - | Routes definition to fetch data and other custom routes config for custom handling (Check below) |
359-
| components | object | true | - | All the components required for your table |
360-
| entity | object | false | - | [Normalizr](https://github.com/paularmstrong/normalizr) specification. Check below for details. |
361-
| layout | array | true | - | The layout of your table |
362-
| editing | boolean | false | false | Set the default state of the table to be in editing mode |
363-
| primaryKey | string | true | - | Set the primary key column of the table for actions like editing. |
354+
| Key | Type | Required | Default | Description |
355+
| ---------------- | ------- | -------- | ------- | ------------------------------------------------------------------------------------------------ |
356+
| name | string | true | - | key in the row data whose value needs to be loaded for the column (does not have to be unique) |
357+
| height | integer | true | - | The maximum height of the table |
358+
| rowHeight | integer | true | - | The maximum height of each table body row |
359+
| routes | object | true | - | Routes definition to fetch data and other custom routes config for custom handling (Check below) |
360+
| components | object | true | - | All the components required for your table |
361+
| entity | object | false | - | [Normalizr](https://github.com/paularmstrong/normalizr) specification. Check below for details. |
362+
| layout | array | true | - | The layout of your table |
363+
| editing | boolean | false | false | Set the default state of the table to be in editing mode |
364+
| primaryKey | string | true | - | Set the primary key column of the table for actions like editing. |
365+
| noResultsMessage | string | true | - | Set the message to be displayed when table is empty |
364366

365367
#### Routes object
366368

‎demo/src/schema/normalized.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export default {
2828
rowHeight: 50,
2929
editing: false,
3030
primaryKey: 'pageId',
31+
noResultsMessage: 'Empty results',
3132
routes: {
3233
get: {
3334
route: '/page',

‎src/components/Body.js‎

Lines changed: 53 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import _ from 'lodash';
22
import React, { useContext, useEffect } from 'react';
33
import { useSelector } from 'react-redux';
4-
import { Tbody, Tr, Td, Div } from '../styled-components';
4+
import { Tbody, Tr, Td, Div, Row } from '../styled-components';
55
import { Body as Renderers } from './Renderer';
66
import { getStyles, getRenderer, getInitialVisibleColumns } from '../utils';
77
import { MODIFY_DATA, SET_BODY_INNER_WIDTH, SET_TABLE_WIDTH, SET_VISIBLE_COLUMN_IDS, SET_COLUMN_WIDTHS } from '../actions';
@@ -34,19 +34,44 @@ const renderCol = (rowIndex, primaryKey, schema, styles, colClassName, column, i
3434
);
3535
};
3636

37-
const renderRow = (columns, rowHeight, styles, primaryKey, schema, rowClassName, colClassName, rowIndex, top) => (
38-
<Tr
39-
key={ rowIndex }
40-
className={ rowClassName }
41-
position="absolute"
42-
top={ top }
43-
columns={ columns }
44-
height={ rowHeight }
45-
even={ rowIndex % 2 === 0 }
46-
styles={ getStyles(styles.tr, 'body') }
47-
>
48-
{ renderCol.bind(this, rowIndex, primaryKey, schema, styles, colClassName) }
49-
</Tr>
37+
const renderRow = (
38+
columns,
39+
rowHeight,
40+
styles,
41+
primaryKey,
42+
schema,
43+
rowClassName,
44+
colClassName,
45+
noResultsMessage,
46+
rowIndex,
47+
top
48+
) => (
49+
rowIndex !== -1
50+
? (
51+
<Tr
52+
key={ rowIndex }
53+
className={ rowClassName }
54+
position="absolute"
55+
top={ top }
56+
columns={ columns }
57+
height={ rowHeight }
58+
even={ rowIndex % 2 === 0 }
59+
styles={ getStyles(styles.tr, 'body') }
60+
>
61+
{ renderCol.bind(this, rowIndex, primaryKey, schema, styles, colClassName) }
62+
</Tr>
63+
) : (
64+
<Row
65+
className={ rowClassName }
66+
height={ rowHeight + 'px' }
67+
style={{
68+
justifyContent: 'center',
69+
alignItems: 'center'
70+
}
71+
}>
72+
{ noResultsMessage }
73+
</Row>
74+
)
5075
);
5176

5277
const Body = React.forwardRef(({ top: startTop = 0, config }, ref) => {
@@ -61,6 +86,7 @@ const Body = React.forwardRef(({ top: startTop = 0, config }, ref) => {
6186
height: minHeight,
6287
primaryKey,
6388
overScanCount = 10,
89+
noResultsMessage = 'No results found',
6490
components: {
6591
Table: { styles = {} }
6692
},
@@ -130,13 +156,23 @@ const Body = React.forwardRef(({ top: startTop = 0, config }, ref) => {
130156
styles={ getStyles(styles, 'tbody') }
131157
ref={ ref }
132158
isPrinting={ isPrinting }
133-
height={ height }
159+
height={ height > 0 ? height : rowHeight }
134160
visibleHeight={ visibleHeight }
135-
innerHeight={ innerHeight }
161+
innerHeight={ innerHeight > 0 ? innerHeight : rowHeight }
136162
range={ range }
137163
rowHeight={ rowHeight }
138164
>
139-
{ renderRow.bind(this, columns, rowHeight, styles, primaryKey, schema, rowClassName, colClassName) }
165+
{ renderRow.bind(
166+
this,
167+
columns,
168+
rowHeight,
169+
styles,
170+
primaryKey,
171+
schema,
172+
rowClassName,
173+
colClassName,
174+
noResultsMessage
175+
)}
140176
</Tbody>
141177
);
142178
});

‎src/styled-components/Tbody.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@ const Tbody = React.forwardRef(({
1515
<div className={ className } style={ style } ref={ ref }>
1616
<Loader />
1717
<div style={{ height: innerHeight, position: 'relative' }}>
18-
{ endIndex - startIndex > 0 && Array(endIndex - startIndex).fill().map((item, index) => {
19-
let currentIndex = startIndex + index;
20-
return children(currentIndex, currentIndex * rowHeight);
21-
})}
18+
{ endIndex - startIndex > 0
19+
? Array(endIndex - startIndex).fill().map((item, index) => {
20+
let currentIndex = startIndex + index;
21+
return children(currentIndex, currentIndex * rowHeight);
22+
}) : children(-1, 0)
23+
}
2224
</div>
2325
</div>
2426
));

0 commit comments

Comments
 (0)