Skip to content

Commit 4121ac1

Browse files
joaocarmojoaocarmo
authored
[Feat] Adds data attributes to columns (#63)
* Updates the dependencies * Adds the column key to the columns as a data attribute * Updates the docs * Adds tests * Fixes some typings * Adds type checking to the pre-commit hook
1 parent 4f23f2b commit 4121ac1

File tree

11 files changed

+1664
-1616
lines changed

11 files changed

+1664
-1616
lines changed

‎.eslintrc.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,18 @@ module.exports = {
3737
],
3838
'no-restricted-syntax': 'off',
3939
'no-void': 'off',
40+
'react/function-component-definition': [
41+
'error',
42+
{ namedComponents: 'arrow-function' },
43+
],
4044
'react/jsx-filename-extension': [
4145
'error',
4246
{ extensions: ['.js', '.jsx', '.ts', '.tsx'] },
4347
],
48+
'react/jsx-props-no-spreading': 'off',
4449
'react/jsx-uses-react': 'off',
45-
'react/static-property-placement': 'off',
4650
'react/react-in-jsx-scope': 'off',
47-
'react/function-component-definition': [
48-
'error',
49-
{ namedComponents: 'arrow-function' },
50-
],
51+
'react/static-property-placement': 'off',
5152
semi: ['error', 'never'],
5253
},
5354
settings: {

‎.husky/pre-commit‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
. "$(dirname "$0")/_/husky.sh"
33

44
yarn lint-staged
5+
yarn type-check

‎README.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -362,10 +362,10 @@ application. Feel free to play around with it, it's built with hot reloading.
362362

363363
If you want to play around, check out this [codepen][codepen].
364364

365-
## Troubleshooting
365+
## FAQ
366366

367367
If you're having trouble with _react-smart-data-table_, please check out the
368-
answers below. Otherwise, feel free to open an issue!
368+
answers below. Otherwise, feel free to open a new issue!
369369

370370
- Check [this answer][hide-pagination] to see how to hide the pagination for an
371371
empty table
@@ -375,6 +375,8 @@ answers below. Otherwise, feel free to open an issue!
375375
event on a row
376376
- Check [this answer][control-page] if you want to control the active page
377377
manually (e.g., based on a URL parameter)
378+
- Check [this answer][column-selector] if you want to style individual columns
379+
differently
378380

379381
## Forking / Contributing
380382

@@ -391,6 +393,7 @@ yarn start
391393

392394
[bootstrap]: https://joaocarmo.github.io/react-smart-data-table/examples/bootstrap/
393395
[codepen]: https://codepen.io/joaocarmo/pen/oNBNZBO
396+
[column-selector]: https://github.com/joaocarmo/react-smart-data-table/issues/62#issuecomment-1002973644
394397
[contribute]: ./CONTRIBUTING.md
395398
[contributor]: ./CODE_OF_CONDUCT.md
396399
[control-page]: https://github.com/joaocarmo/react-smart-data-table/issues/60#issuecomment-974718595

‎lib/SmartDataTable.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,7 @@ class SmartDataTable extends Component<
313313
const showCol = !thisColProps || !thisColProps.invisible
314314
if (showCol) {
315315
return (
316-
<Table.HeaderCell key={column.key}>
316+
<Table.HeaderCell data-column-name={column.key} key={column.key}>
317317
<span>{column.text}</span>
318318
<span className="rsdt rsdt-sortable">
319319
{sortable && column.sortable ? this.renderSorting(column) : null}
@@ -343,8 +343,11 @@ class SmartDataTable extends Component<
343343

344344
if (showCol) {
345345
return (
346-
// eslint-disable-next-line react/no-array-index-key
347-
<Table.Cell key={`row-${i}-column-${j}`}>
346+
<Table.Cell
347+
data-column-name={column.key}
348+
// eslint-disable-next-line react/no-array-index-key
349+
key={`row-${i}-column-${j}`}
350+
>
348351
{utils.isFunction(transformFn) ? (
349352
transformFn(row[column.key], i, row)
350353
) : (

‎lib/components/CellValue.tsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
1-
import { FC, memo, useCallback, useMemo, ReactNode } from 'react'
1+
import { memo, useCallback, useMemo } from 'react'
2+
import type { FC, ReactNode } from 'react'
23
import PropTypes from 'prop-types'
34
import { find as linkifyFind } from 'linkifyjs'
45
import HighlightValue from './HighlightValue'
56
import * as utils from '../helpers/functions'
67
import * as constants from '../helpers/constants'
78

8-
interface CellValueProps {
9-
children: ReactNode
9+
export interface CellValueProps {
10+
children?: ReactNode
1011
content?: ReactNode
11-
filterable: boolean
12-
filterValue: string
13-
isImg: boolean
14-
parseBool: boolean | utils.ParseBool
15-
parseImg: boolean | utils.ParseImg
16-
withLinks: boolean
12+
filterable?: boolean
13+
filterValue?: string
14+
isImg?: boolean
15+
parseBool?: boolean | utils.ParseBool
16+
parseImg?: boolean | utils.ParseImg
17+
withLinks?: boolean
1718
}
1819

1920
const CellValue = ({
@@ -36,7 +37,11 @@ const CellValue = ({
3637
return value
3738
}
3839

39-
return <HighlightValue filterValue={filterValue}>{value}</HighlightValue>
40+
return (
41+
<HighlightValue data-testid="cell-value" filterValue={filterValue}>
42+
{value}
43+
</HighlightValue>
44+
)
4045
}, [filterValue, filterable, value])
4146

4247
const renderImage = useCallback(

‎lib/components/HighlightValue.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import { FC, memo, useMemo, ReactNode } from 'react'
1+
import { memo, useMemo } from 'react'
2+
import type { FC, ReactNode } from 'react'
23
import PropTypes from 'prop-types'
34
import * as utils from '../helpers/functions'
45

56
interface HighlightValueProps {
67
children: ReactNode
78
filterValue: string
9+
'data-testid': string
810
}
911

1012
const areEqual = (
@@ -15,6 +17,7 @@ const areEqual = (
1517
const HighlightValue = ({
1618
children,
1719
filterValue,
20+
'data-testid': testId = 'highlight-value',
1821
}: HighlightValueProps): ReactNode => {
1922
const { first, highlight, last } = useMemo(
2023
() => utils.highlightValueParts(children as string, filterValue),
@@ -26,7 +29,7 @@ const HighlightValue = ({
2629
}
2730

2831
return (
29-
<span>
32+
<span data-testid={testId}>
3033
{first}
3134
<span className="rsdt rsdt-highlight">{highlight}</span>
3235
{last}

‎lib/components/__tests__/CellValue.test.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { render, screen } from '@testing-library/react'
2+
import CellValue from '../CellValue'
3+
import type { CellValueProps } from '../CellValue'
4+
5+
const setup = (props: CellValueProps) => {
6+
const { children, content, ...otherProps } = props
7+
const utils = render(
8+
<CellValue content={content} {...otherProps}>
9+
{children}
10+
</CellValue>,
11+
)
12+
13+
const cellValue: HTMLInputElement =
14+
screen.queryByText(String(children || content)) ||
15+
screen.queryByTestId('cell-value')
16+
17+
return {
18+
...utils,
19+
cellValue,
20+
}
21+
}
22+
23+
describe('CellValue', () => {
24+
it('should render children correctly', () => {
25+
const { cellValue } = setup({ children: 'test children' })
26+
27+
expect(cellValue).toBeInTheDocument()
28+
})
29+
30+
it('should render content correctly', () => {
31+
const { cellValue } = setup({ content: 'test content' })
32+
33+
expect(cellValue).toBeInTheDocument()
34+
})
35+
36+
it('should render numbers correctly', () => {
37+
const { cellValue } = setup({ children: 1 })
38+
39+
expect(cellValue).toBeInTheDocument()
40+
})
41+
42+
it('should render booleans correctly', () => {
43+
const { cellValue } = setup({ children: true })
44+
45+
expect(cellValue).toBeInTheDocument()
46+
})
47+
48+
it('should render filterables correctly', () => {
49+
const { cellValue } = setup({
50+
children: 'alice went down the rabbit hole',
51+
filterable: true,
52+
filterValue: 'rabbit',
53+
})
54+
55+
expect(cellValue).toBeInTheDocument()
56+
57+
const highlightedValue = screen.queryByText('rabbit')
58+
59+
expect(highlightedValue).toBeInTheDocument()
60+
expect(highlightedValue).toHaveClass('rsdt-highlight')
61+
})
62+
})

‎lib/components/__tests__/Paginator.test.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { render, screen } from '@testing-library/react'
22
import userEvent from '@testing-library/user-event'
3-
import Paginator, { PaginatorProps } from '../Paginator'
3+
import Paginator from '../Paginator'
4+
import type { PaginatorProps } from '../Paginator'
45

56
const mockPageChange = jest.fn()
67

‎lib/components/__tests__/SelectAll.test.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { render, screen } from '@testing-library/react'
22
import userEvent from '@testing-library/user-event'
3-
import SelectAll, { SelectAllProps } from '../SelectAll'
3+
import SelectAll from '../SelectAll'
4+
import type { SelectAllProps } from '../SelectAll'
45

56
const selectAllWord = 'selectAllWord'
67
const unSelectAllWord = 'unSelectAllWord'

‎package.json‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -61,64 +61,64 @@
6161
"clsx": "^1.1.1",
6262
"escape-string-regexp": "^5.0.0",
6363
"flat": "^5.0.2",
64-
"linkifyjs": "^3.0.1",
65-
"prop-types": "^15.7.2",
64+
"linkifyjs": "^3.0.5",
65+
"prop-types": "^15.8.1",
6666
"snake-case": "^3.0.3"
6767
},
6868
"peerDependencies": {
6969
"react": "^16.8.0 || ^17.0.0"
7070
},
7171
"devDependencies": {
72-
"@babel/core": "^7.16.0",
73-
"@babel/plugin-transform-runtime": "^7.16.4",
74-
"@babel/preset-env": "^7.16.4",
75-
"@babel/preset-react": "^7.14.5",
76-
"@babel/preset-typescript": "^7.15.0",
77-
"@babel/runtime": "^7.16.3",
72+
"@babel/core": "^7.16.7",
73+
"@babel/plugin-transform-runtime": "^7.16.7",
74+
"@babel/preset-env": "^7.16.7",
75+
"@babel/preset-react": "^7.16.7",
76+
"@babel/preset-typescript": "^7.16.7",
77+
"@babel/runtime": "^7.16.7",
7878
"@testing-library/dom": "^8.11.1",
79-
"@testing-library/jest-dom": "^5.15.0",
79+
"@testing-library/jest-dom": "^5.16.1",
8080
"@testing-library/react": "^12.1.2",
8181
"@testing-library/user-event": "^13.5.0",
8282
"@types/flat": "^5.0.2",
83-
"@types/jest": "^27.0.3",
83+
"@types/jest": "^27.4.0",
8484
"@types/linkifyjs": "^2.1.4",
85-
"@types/node": "^16.11.9",
85+
"@types/node": "^17.0.8",
8686
"@types/prop-types": "^15.7.4",
87-
"@types/react": "^17.0.35",
87+
"@types/react": "^17.0.38",
8888
"@types/react-dom": "^17.0.9",
89-
"@types/testing-library__jest-dom": "^5.14.1",
90-
"@typescript-eslint/eslint-plugin": "^5.4.0",
91-
"@typescript-eslint/parser": "^5.4.0",
92-
"babel-jest": "^27.3.1",
89+
"@types/testing-library__jest-dom": "^5.14.2",
90+
"@typescript-eslint/eslint-plugin": "^5.9.0",
91+
"@typescript-eslint/parser": "^5.9.0",
92+
"babel-jest": "^27.4.6",
9393
"babel-loader": "^8.1.0",
94-
"core-js": "^3.18.1",
94+
"core-js": "^3.20.2",
9595
"css-loader": "^6.3.0",
96-
"eslint": "^8.2.0",
97-
"eslint-config-airbnb": "^19.0.0",
98-
"eslint-config-airbnb-typescript": "^16.0.0",
96+
"eslint": "^8.6.0",
97+
"eslint-config-airbnb": "^19.0.4",
98+
"eslint-config-airbnb-typescript": "^16.1.0",
9999
"eslint-config-prettier": "^8.3.0",
100-
"eslint-plugin-import": "^2.25.3",
101-
"eslint-plugin-jest": "^25.2.4",
100+
"eslint-plugin-import": "^2.25.4",
101+
"eslint-plugin-jest": "^25.3.4",
102102
"eslint-plugin-jsx-a11y": "^6.5.1",
103103
"eslint-plugin-prettier": "^4.0.0",
104-
"eslint-plugin-react": "^7.27.1",
104+
"eslint-plugin-react": "^7.28.0",
105105
"eslint-plugin-react-hooks": "^4.3.0",
106106
"faker": "^5.1.0",
107107
"husky": "^7.0.2",
108108
"identity-obj-proxy": "^3.0.0",
109-
"jest": "^27.3.1",
109+
"jest": "^27.4.7",
110110
"jest-fetch-mock": "^3.0.3",
111-
"lint-staged": "^12.0.3",
112-
"mini-css-extract-plugin": "^2.4.5",
111+
"lint-staged": "^12.1.5",
112+
"mini-css-extract-plugin": "^2.4.6",
113113
"pinst": "^2.1.6",
114-
"prettier": "^2.4.1",
114+
"prettier": "^2.5.1",
115115
"react": "^17.0.1",
116116
"react-dom": "^17.0.1",
117117
"style-loader": "^3.3.0",
118-
"typescript": "^4.5.2",
119-
"webpack": "^5.64.2",
118+
"typescript": "^4.5.4",
119+
"webpack": "^5.65.0",
120120
"webpack-cli": "^4.8.0",
121-
"webpack-dev-server": "^4.5.0",
121+
"webpack-dev-server": "^4.7.2",
122122
"webpack-merge": "^5.8.0"
123123
}
124124
}

0 commit comments

Comments
 (0)