Skip to content

Commit 0e1b0d1

Browse files
anuveyatsuanuveyatsu
authored
Merge pull request #84 from datopian/upgrade-the-package
Upgrade the package
2 parents 579fc52 + ebb35f7 commit 0e1b0d1

File tree

7 files changed

+9754
-41427
lines changed

7 files changed

+9754
-41427
lines changed

‎package.json‎

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,49 @@
22
"name": "@datopian/datapackage-views-js",
33
"version": "1.4.5",
44
"private": false,
5+
"license": "MIT",
56
"main": "/dist/App.js",
67
"module": "/dist/App.js",
78
"dependencies": {
8-
"datapackage-render": "git+https://github.com/frictionlessdata/datapackage-render-js.git",
9+
"@tanstack/react-table": "^8.20.1",
10+
"datapackage-render": "git+https://github.com/frictionlessdata/datapackage-render-js.git#646b85eaccbb6961d5a734c54fbb00a4c9923b5e",
911
"i18next": "^19.0.3",
1012
"i18next-browser-languagedetector": "^4.0.1",
11-
"leaflet": "^1.5.1",
12-
"plotly.js-basic-dist": "^1.49.2",
13-
"react": "^16.8.6",
14-
"react-csv": "^1.1.1",
15-
"react-dom": "^16.8.6",
13+
"leaflet": "^1.9.4",
14+
"plotly.js-basic-dist": "^2.35.0",
15+
"react": "^18.3.1",
16+
"react-csv": "^2.2.2",
17+
"react-dom": "^18.3.1",
1618
"react-i18next": "^11.2.7",
1719
"react-leaflet": "^2.4.0",
18-
"react-loader-spinner": "^2.3.0",
20+
"react-loader-spinner": "^6.1.6",
1921
"react-pdf-js": "^5.1.0",
20-
"react-plotly.js": "^2.3.0",
21-
"react-scripts": "3.0.1",
22+
"react-plotly.js": "^2.6.0",
23+
"react-scripts": "4.0.3",
2224
"react-table-v6": "^6.8.6",
2325
"react-vega": "4.0.2",
24-
"vega-lib": "4.4.0"
26+
"vega-lib": "^4.4.0"
2527
},
2628
"scripts": {
2729
"cosmos": "cosmos",
2830
"cosmos:export": "cosmos-export",
2931
"watch:css": "postcss src/stylesheets/index.css -o src/index.css -w",
3032
"build:css": "postcss src/stylesheets/index.css -o src/index.css",
31-
"start": "npm run watch:css & react-scripts start",
33+
"start": "NODE_OPTIONS=\"--openssl-legacy-provider\" react-scripts start",
3234
"dev": "npm run watch:css & react-scripts start & npm run cosmos",
33-
"build": "npm run build:css && react-scripts build",
35+
"build": "NODE_OPTIONS=\"--openssl-legacy-provider\" react-scripts build",
3436
"build:non-optimized": "node ./build-non-split.js && mv build/static/js/*.js dist/js/main.js",
3537
"build:package": "rm -rf dist/ && mkdir dist && NODE_ENV=production npx babel src/ -d dist/ --copy-files",
3638
"coverage": "cat coverage/lcov.info | coveralls",
37-
"test": "rescripts test --coverage --watchAll=false --collectCoverageFrom=src/**/*.js --collectCoverageFrom=!src/serviceWorker.js && npm run coverage",
38-
"test:watch": "rescripts test",
39-
"test:only": "rescripts test --watchAll=false",
39+
"test": "react-scripts test --coverage --watchAll=false --collectCoverageFrom=src/**/*.js --collectCoverageFrom=!src/serviceWorker.js && npm run coverage",
40+
"test:watch": "react-scripts test",
41+
"test:only": "react-scripts test --watchAll=false",
4042
"eject": "react-scripts eject"
4143
},
4244
"babel": {
4345
"presets": [
4446
"@babel/preset-env",
4547
"@babel/preset-react"
46-
],
47-
"plugins": [
48-
"@babel/plugin-proposal-class-properties"
4948
]
5049
},
5150
"eslintConfig": {
@@ -64,19 +63,18 @@
6463
]
6564
},
6665
"devDependencies": {
67-
"@babel/cli": "^7.5.5",
68-
"@babel/core": "^7.5.5",
69-
"@babel/plugin-proposal-class-properties": "^7.7.4",
70-
"@babel/preset-env": "^7.5.5",
71-
"@babel/preset-react": "^7.0.0",
72-
"@rescripts/cli": "^0.0.11",
73-
"@testing-library/react": "^8.0.4",
74-
"autoprefixer": "^9.6.0",
75-
"coveralls": "^3.0.4",
76-
"jest-dom": "^3.5.0",
77-
"postcss-cli": "^6.1.2",
78-
"react-cosmos": "^4.8.1",
79-
"rewire": "^4.0.1",
80-
"tailwindcss": "^1.0.4"
66+
"@babel/cli": "^7.25.0",
67+
"@babel/core": "^7.25.0",
68+
"@babel/preset-env": "^7.25.0",
69+
"@babel/preset-react": "^7.24.0",
70+
"@testing-library/dom": "^10.4.1",
71+
"@testing-library/jest-dom": "^6.5.0",
72+
"@testing-library/react": "^16.0.1",
73+
"autoprefixer": "^9.8.6",
74+
"coveralls": "^3.1.1",
75+
"postcss-cli": "^8.3.1",
76+
"react-cosmos": "^6.2.0",
77+
"rewire": "^7.0.0",
78+
"tailwindcss": "^2.2.19"
8179
}
8280
}

‎src/App.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Map from './Map.js'
88
import PdfViewer from './Document.js'
99
import Chart from './Chart.js'
1010
import {getResourceCachedValues, simpleToPlotly, plotlyToPlotly, vegaToVega} from 'datapackage-render'
11-
import Loader from 'react-loader-spinner'
11+
import { Grid } from 'react-loader-spinner'
1212
import tableToGeoData from './utils'
1313
import {useTranslation} from "react-i18next"
1414

@@ -19,8 +19,7 @@ export function DataView(props) {
1919
if (props.loading) {
2020
return (
2121
<div className="App">
22-
<Loader
23-
type="Grid"
22+
<Grid
2423
color="#D3D3D3"
2524
height="50"
2625
width="50"
@@ -126,8 +125,7 @@ export function DataView(props) {
126125
} else {
127126
return (
128127
<div className="App">
129-
<Loader
130-
type="Grid"
128+
<Grid
131129
color="#D3D3D3"
132130
height="50"
133131
width="50"

‎src/Table.js‎

Lines changed: 74 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,84 @@
1-
import React from "react"
2-
import ReactTable from 'react-table-v6'
3-
import 'react-table-v6/react-table.css'
4-
import { CSVLink } from "react-csv"
1+
import React, { useMemo } from "react"
2+
import {
3+
useReactTable,
4+
getCoreRowModel,
5+
flexRender,
6+
createColumnHelper,
7+
} from '@tanstack/react-table'
8+
const columnHelper = createColumnHelper()
59

10+
export default function Table({ data = [], schema = {} }) {
611

7-
export default class Table extends React.Component {
8-
constructor(props) {
9-
super(props);
10-
this.state = {
11-
data: this.props.data || [],
12-
schema: Object.assign({}, this.props.schema)
13-
};
14-
}
15-
16-
updateData = (newData) => {
17-
this.setState({
18-
data: newData
19-
})
20-
}
21-
22-
getFields = () => {
23-
if (this.state.schema && this.state.schema.fields) {
24-
return this.state.schema.fields
12+
const getFields = () => {
13+
if (schema && schema.fields) {
14+
return schema.fields
2515
}
2616
const fields = []
27-
for (let key in this.state.data[0]) {
28-
fields.push({
29-
name: key
30-
})
17+
if (data.length > 0) {
18+
for (let key in data[0]) {
19+
fields.push({
20+
name: key
21+
})
22+
}
3123
}
3224
return fields
3325
}
3426

35-
render() {
36-
return (
37-
<ReactTable
38-
data={this.state.data}
39-
columns={this.getFields().map(field => {
40-
return {
41-
Header: field.name,
42-
id: field.name,
43-
accessor: val => val[field.name],
44-
Cell: props => <div className={field.type || ''}>
45-
<span>{props.value}</span>
46-
</div>
47-
}
48-
})}
49-
getTheadThProps={() => {
50-
return {style: {"wordWrap": "break-word", "whiteSpace": "initial"}}
51-
}}
52-
showPagination={false}
53-
defaultPageSize={this.state.data.length}
54-
showPageSizeOptions={false}
55-
minRows={this.state.data.length}
56-
/>
27+
const columns = useMemo(() => {
28+
return getFields().map(field =>
29+
columnHelper.accessor(field.name, {
30+
header: field.name,
31+
id: field.name,
32+
cell: info => (
33+
<div className={field.type || ''}>
34+
<span>{info.getValue()}</span>
35+
</div>
36+
)
37+
})
5738
)
58-
}
39+
}, [data, schema])
40+
41+
const table = useReactTable({
42+
data,
43+
columns,
44+
getCoreRowModel: getCoreRowModel(),
45+
})
46+
47+
return (
48+
<div className="overflow-x-auto">
49+
<table className="min-w-full">
50+
<thead>
51+
{table.getHeaderGroups().map(headerGroup => (
52+
<tr key={headerGroup.id}>
53+
{headerGroup.headers.map(header => (
54+
<th
55+
key={header.id}
56+
style={{ wordWrap: "break-word", whiteSpace: "initial" }}
57+
className="px-4 py-2 text-left"
58+
>
59+
{header.isPlaceholder
60+
? null
61+
: flexRender(
62+
header.column.columnDef.header,
63+
header.getContext()
64+
)}
65+
</th>
66+
))}
67+
</tr>
68+
))}
69+
</thead>
70+
<tbody>
71+
{table.getRowModel().rows.map(row => (
72+
<tr key={row.id}>
73+
{row.getVisibleCells().map(cell => (
74+
<td key={cell.id} className="px-4 py-2 border-b">
75+
{flexRender(cell.column.columnDef.cell, cell.getContext())}
76+
</td>
77+
))}
78+
</tr>
79+
))}
80+
</tbody>
81+
</table>
82+
</div>
83+
)
5984
}

0 commit comments

Comments
 (0)