xmengnet/yacd
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix: connections table header data miss alignment

Browse source
This commit is contained in:
Haishan 2019-12-21 22:47:04 +08:00
parent 5f032aa0a8
commit 1ab5ac02e6
3 changed files with 31 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -54,7 +54,7 @@
"react-feather": "^2.0.3", "react-feather": "^2.0.3",
"react-modal": "^3.11.1", "react-modal": "^3.11.1",
"react-router-dom": "^5.1.2", "react-router-dom": "^5.1.2",
"react-table": "^7.0.0-rc.15", "react-table": "7.0.0-beta.12",
"react-window": "^1.8.5", "react-window": "^1.8.5",
"redux": "^4.0.4", "redux": "^4.0.4",
"redux-logger": "^3.0.6", "redux-logger": "^3.0.6",

57
src/components/ConnectionTable.js
View file

@ -8,7 +8,7 @@ import { useTable, useSortBy } from 'react-table';
import s from './ConnectionTable.module.css'; import s from './ConnectionTable.module.css';
const columns = [ const columns = [
{ accessor: 'id', show: false }, // { accessor: 'id', show: false },
{ Header: 'Host', accessor: 'host' }, { Header: 'Host', accessor: 'host' },
{ Header: 'Download', accessor: 'download' }, { Header: 'Download', accessor: 'download' },
{ Header: 'Upload', accessor: 'upload' }, { Header: 'Upload', accessor: 'upload' },
@ -34,43 +34,38 @@ function renderCell(cell, now) {
} }
} }
const sortById = { id: 'id', desc: true }; // const sortById = { id: 'id', desc: true };
// const sortByStart = { id: 'start', desc: true }; // const sortByStart = { id: 'start', desc: true };
const tableState = { // const tableState = {
sortBy: [ // sortBy: [
// maintain a more stable order // // maintain a more stable order
sortById // sortById
] // ],
}; // hiddenColumns: ['id']
// };
function tableReducer(newState, action, _prevState) { // function tableReducer(newState, action, _prevState) {
const { type } = action; // const { type } = action;
if (type === 'toggleSortBy') { // if (type === 'toggleSortBy') {
const { sortBy = [] } = newState; // const { sortBy = [] } = newState;
if (sortBy.length === 0) { // if (sortBy.length === 0) {
return { // return {
...newState, // ...newState,
sortBy: [sortById] // sortBy: [sortById]
}; // };
} // }
} // }
return newState; // return newState;
} // }
function Table({ data }) { function Table({ data }) {
const now = new Date(); const now = new Date();
const { const { getTableProps, headerGroups, rows, prepareRow } = useTable(
getTableProps,
// getTableBodyProps,
headerGroups,
rows,
prepareRow
} = useTable(
{ {
columns, columns,
data, data
initialState: tableState, // initialState: tableState,
reducer: tableReducer // reducer: tableReducer
}, },
useSortBy useSortBy
); );

8
yarn.lock
View file

@ -6810,10 +6810,10 @@ react-router@5.1.2:
tiny-invariant "^1.0.2" tiny-invariant "^1.0.2"
tiny-warning "^1.0.0" tiny-warning "^1.0.0"
react-table@^7.0.0-rc.15: react-table@7.0.0-beta.12:
version "7.0.0-rc.15" version "7.0.0-beta.12"
resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-rc.15.tgz#bb855e4e2abbb4aaf0ed2334404a41f3ada8e13a" resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-beta.12.tgz#ae54b398fbdb527b9fad82e52c4d829c00fdd5dc"
integrity sha512-ofMOlgrioHhhvHjvjsQkxvfQzU98cqwy6BjPGNwhLN1vhgXeWi0mUGreaCPvRenEbTiXsQbMl4k3Xmx3Mut8Rw== integrity sha512-h1c0KNTBRPAMgZumaNixr3X0w7kFTuqk6pHwia12LsMgnTHNEEeqp7+tQ5fTPwwMArp1/OHXeOdSKEes1C83iw==
react-window@^1.8.5: react-window@^1.8.5:
version "1.8.5" version "1.8.5"