Loading...
23 |
24 |
25 |
26 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import globals from 'globals'
3 | import eslint from '@eslint/js'
4 | import tseslint from 'typescript-eslint'
5 | import reactPlugin from 'eslint-plugin-react'
6 |
7 | export default tseslint.config(
8 | eslint.configs.recommended,
9 | ...tseslint.configs.recommended,
10 | reactPlugin.configs.flat.recommended,
11 | {
12 | files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
13 | },
14 | {
15 | ignores: [
16 | '.eslintrc.js',
17 | 'babel.config.js',
18 | 'jest.config.js',
19 | 'webpack.config.js',
20 | 'webpack.dev.js',
21 | ],
22 | },
23 | {
24 | languageOptions: {
25 | parserOptions: {
26 | ecmaFeatures: {
27 | jsx: true,
28 | },
29 | },
30 | globals: {
31 | ...globals.browser,
32 | },
33 | },
34 | },
35 | {
36 | rules: {
37 | '@typescript-eslint/no-unused-vars': 'off',
38 | 'no-unused-vars': 'off',
39 | 'react/prop-types': 'off',
40 | 'react/react-in-jsx-scope': 'off',
41 | },
42 | },
43 | {
44 | settings: {
45 | react: {
46 | version: 'detect',
47 | },
48 | },
49 | },
50 | )
51 |
--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
1 | import { PureComponent } from 'react'
2 | import { createRoot } from 'react-dom/client'
3 | import { imgb64 } from '../lib/helpers/tests'
4 | import SmartDataTable from 'react-smart-data-table-dev'
5 | import 'react-smart-data-table-dev.css'
6 |
7 | const sematicUI = {
8 | change: 'ui labeled secondary icon button',
9 | changeIcon: 'exchange icon',
10 | checkbox: 'ui toggle checkbox',
11 | deleteIcon: 'trash red icon',
12 | input: 'ui input',
13 | iconInput: 'ui icon input',
14 | labeledInput: 'ui right labeled input',
15 | loader: 'ui active text loader',
16 | message: 'ui message',
17 | refresh: 'ui labeled primary icon button',
18 | refreshIcon: 'sync alternate icon',
19 | rowsIcon: 'numbered list icon',
20 | searchIcon: 'search icon',
21 | segment: 'ui segment',
22 | select: 'ui dropdown',
23 | table: 'ui compact selectable table',
24 | }
25 |
26 | const generateData = async (numResults = 0) => {
27 | const faker = await import('@withshepherd/faker')
28 |
29 | let total = numResults || 0
30 |
31 | if (typeof numResults === 'string') {
32 | total = parseInt(numResults, 10)
33 | }
34 |
35 | const data = []
36 |
37 | for (let i = 0; i < total; i += 1) {
38 | const row = {
39 | _id: i,
40 | address: {
41 | city: faker.address.city(),
42 | state: faker.address.state(),
43 | country: faker.address.country(),
44 | },
45 | url: faker.internet.url(),
46 | isMarried: faker.datatype.boolean(),
47 | actions: null,
48 | avatar: imgb64,
49 | fullName: faker.name.findName(),
50 | _username: faker.internet.userName(),
51 | password_: faker.internet.password(),
52 | 'email.address': faker.internet.email(),
53 | phone_number: faker.phone.phoneNumber(),
54 | }
55 |
56 | // Add random attributes to random rows (after the first)
57 | if (i > 0 && faker.datatype.boolean()) {
58 | const column = faker.database.column()
59 |
60 | if (!row[column]) {
61 | row[column] = faker.datatype.number()
62 | }
63 | }
64 |
65 | data.push(row)
66 | }
67 |
68 | return data
69 | }
70 |
71 | const emptyTable = (
72 |
73 | There is no data available to display.
74 |
75 | )
76 |
77 | const loader = Loading...
78 |
79 | const DeleteButton = ({ handleDelete }) => (
80 |
89 | )
90 |
91 | class AppDemo extends PureComponent {
92 | constructor(props) {
93 | super(props)
94 |
95 | this.state = {
96 | useApi: false,
97 | apiUrl: 'https://randomuser.me/api/?results=100',
98 | apiUrlNew: 'https://randomuser.me/api/?results=100',
99 | dataKey: 'results',
100 | numResults: 10,
101 | data: [],
102 | dataSampling: 0,
103 | filterValue: '',
104 | perPage: 0,
105 | showOnRowClick: true,
106 | changeOrder: false,
107 | orderedHeaders: [
108 | '_id',
109 | 'avatar',
110 | 'fullName',
111 | '_username',
112 | 'password_',
113 | 'email.address',
114 | 'phone_number',
115 | 'address.city',
116 | 'address.state',
117 | 'address.country',
118 | 'url',
119 | 'isMarried',
120 | 'actions',
121 | ],
122 | hideUnordered: false,
123 | }
124 |
125 | this.changeData = this.changeData.bind(this)
126 | this.handleCheckboxChange = this.handleCheckboxChange.bind(this)
127 | this.handleNewApiUrl = this.handleNewApiUrl.bind(this)
128 | this.handleOnChange = this.handleOnChange.bind(this)
129 | this.handleOnChangeOrder = this.handleOnChangeOrder.bind(this)
130 | this.handleOnPerPage = this.handleOnPerPage.bind(this)
131 | this.onRowClick = this.onRowClick.bind(this)
132 | this.setNewData = this.setNewData.bind(this)
133 | }
134 |
135 | componentDidMount() {
136 | this.setNewData()
137 | }
138 |
139 | async setNewData() {
140 | const { numResults } = this.state
141 |
142 | const data = await generateData(numResults)
143 |
144 | this.setState({ data })
145 | }
146 |
147 | handleNewApiUrl() {
148 | const { apiUrlNew } = this.state
149 | this.setState({ apiUrl: apiUrlNew })
150 | }
151 |
152 | handleDelete(event, idx, _row) {
153 | event.preventDefault()
154 | event.stopPropagation()
155 |
156 | const { data } = this.state
157 | const newData = JSON.parse(JSON.stringify(data))
158 |
159 | newData.splice(idx, 1)
160 |
161 | this.setState({ data: newData })
162 | }
163 |
164 | getHeaders() {
165 | return {
166 | _id: {
167 | text: 'Identifier',
168 | invisible: true,
169 | filterable: false,
170 | transform: (value) => `Row #${value + 1}`,
171 | },
172 | avatar: {
173 | text: 'Profile Pic',
174 | sortable: false,
175 | filterable: false,
176 | },
177 | _username: {
178 | invisible: true,
179 | },
180 | password_: {
181 | invisible: true,
182 | },
183 | fullName: {
184 | sortable: (a, b) => a.fullName.localeCompare(b.fullName),
185 | },
186 | phone_number: {
187 | sortable: false,
188 | },
189 | 'address.city': {
190 | text: 'City',
191 | },
192 | 'address.state': {
193 | text: 'State',
194 | },
195 | 'address.country': {
196 | text: 'Country',
197 | },
198 | url: {
199 | text: 'Web Page',
200 | sortable: (a, b) =>
201 | a.url
202 | .replace(/^https?:\/\//, '')
203 | .localeCompare(b.url.replace(/^https?:\/\//, '')),
204 | },
205 | actions: {
206 | text: 'Actions',
207 | sortable: false,
208 | filterable: false,
209 | transform: (value, idx, row) => (
210 |
295 |
396 | {useApi && (
397 |
296 |
303 |
304 |
305 | {divider}
306 |
318 | {divider}
319 | {!useApi && (
320 | <>
321 |
329 | {divider}
330 |
331 | )}
332 |
340 | {!useApi && (
341 |
342 | {divider}
343 |
344 |
352 |
353 |
354 |
355 | )}
356 | {divider}
357 |
358 |
364 |
365 |
366 | {divider}
367 | {!useApi && (
368 |
369 |
375 |
376 |
377 | )}
378 | {divider}
379 | {!useApi && (
380 |
381 |
390 |
393 |
394 | )}
395 |
398 |
427 | )}
428 | {changeOrder && (
429 |
399 |
406 |
407 | {divider}
408 |
409 |
416 |
417 | {divider}
418 |
426 |
430 | {orderedHeaders.map((header, idx) => (
431 |
461 | )}
462 |
432 |
459 | ))}
460 |
436 |
444 |
446 |
452 |
458 | {header}
445 |
463 |
469 | {useApi && (
470 | 464 | {useApi 465 | ? 'While using async data, the state is controlled internally by the table' 466 | : `Total rows in the table: ${data.length}`} 467 |
468 |
60 |
66 | )
67 | }
68 |
69 | render(): ReactNode {
70 | const { hasError } = this.state
71 | const { children, fbComponent } = this.props
72 |
73 | if (hasError) {
74 | // Render the fallback UI
75 | if (fbComponent) {
76 | return fbComponent
77 | }
78 |
79 | return this.renderDefaultFB()
80 | }
81 |
82 | return children
83 | }
84 | }
85 |
86 | export default ErrorBoundary
87 |
--------------------------------------------------------------------------------
/lib/components/HighlightValue.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react'
2 | import type { FC, PropsWithChildren } from 'react'
3 | import * as utils from '../helpers/functions'
4 |
5 | interface HighlightValueProps {
6 | filterValue: string
7 | 'data-testid'?: string
8 | }
9 |
10 | const HighlightValue: FC{constants.GENERIC_ERROR_MESSAGE}
61 |
62 |
65 | {error && error.toString()}
63 |{errorInfo.componentStack}
64 |
33 | {paginatorItems.map(({ active, value, text }, idx) => (
34 |
43 | )
44 | }
45 |
46 | export default memo(Paginator, areEqual)
47 |
--------------------------------------------------------------------------------
/lib/components/PaginatorItem.tsx:
--------------------------------------------------------------------------------
1 | import { memo, MouseEvent, useCallback } from 'react'
2 | import type { FC } from 'react'
3 | import cx from 'clsx'
4 | import * as utils from '../helpers/functions'
5 | import '../css/paginator.css'
6 |
7 | export type PageChangeFnOpts = {
8 | activePage: number
9 | }
10 |
11 | export type PageChangeFn = (
12 | event: MouseEvent