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-modal": "^3.11.1",
"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",
"redux": "^4.0.4",
"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';
const columns = [
{ accessor: 'id', show: false },
// { accessor: 'id', show: false },
{ Header: 'Host', accessor: 'host' },
{ Header: 'Download', accessor: 'download' },
{ 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 tableState = {
sortBy: [
// maintain a more stable order
sortById
]
};
// const tableState = {
// sortBy: [
// // maintain a more stable order
// sortById
// ],
// hiddenColumns: ['id']
// };
function tableReducer(newState, action, _prevState) {
const { type } = action;
if (type === 'toggleSortBy') {
const { sortBy = [] } = newState;
if (sortBy.length === 0) {
return {
...newState,
sortBy: [sortById]
};
}
}
return newState;
}
// function tableReducer(newState, action, _prevState) {
// const { type } = action;
// if (type === 'toggleSortBy') {
// const { sortBy = [] } = newState;
// if (sortBy.length === 0) {
// return {
// ...newState,
// sortBy: [sortById]
// };
// }
// }
// return newState;
// }
function Table({ data }) {
const now = new Date();
const {
getTableProps,
// getTableBodyProps,
headerGroups,
rows,
prepareRow
} = useTable(
const { getTableProps, headerGroups, rows, prepareRow } = useTable(
{
columns,
data,
initialState: tableState,
reducer: tableReducer
data
// initialState: tableState,
// reducer: tableReducer
},
useSortBy
);

8
yarn.lock
View file

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