@@ -46,38 +46,39 @@ export const ChainTransactions = () => {
),
},
{
- Header: 'Date',
- accessor: 'created_at',
- Cell: ({ row }: any) => (
+ header: 'Date',
+ accessorKey: 'created_at',
+ cell: ({ row }: any) => (
),
},
{
- Header: 'Sats',
- accessor: 'tokens',
- Cell: ({ row }: any) => (
+ header: 'Sats',
+ accessorKey: 'tokens',
+ cell: ({ row }: any) => (
),
},
{
- Header: 'Fee',
- accessor: 'fee',
- Cell: ({ row }: any) => (
+ header: 'Fee',
+ accessorKey: 'fee',
+ cell: ({ row }: any) => (
),
},
- { Header: 'Confirmations', accessor: 'confirmation_count' },
- { Header: 'Confirmation Block', accessor: 'confirmation_height' },
+ { header: 'Confirmations', accessorKey: 'confirmation_count' },
+ { header: 'Confirmation Block', accessorKey: 'confirmation_height' },
{
- Header: 'Output Addresses',
- accessor: 'output_addresses',
- Cell: ({ row }: any) =>
+ header: 'Output Addresses',
+ accessorKey: 'output_addresses',
+ enableSorting: false,
+ cell: ({ row }: any) =>
row.original.output_addresses.map((a: string) => (
{getAddressLink(a)}
@@ -85,9 +86,10 @@ export const ChainTransactions = () => {
)),
},
{
- Header: 'Transaction',
- accessor: 'id',
- Cell: ({ row }: any) => (
+ header: 'Transaction',
+ accessorKey: 'id',
+ enableSorting: false,
+ cell: ({ row }: any) => (
{getTransactionLink(row.original.id)}
@@ -106,6 +108,11 @@ export const ChainTransactions = () => {
}
return (
-
+
);
};
diff --git a/src/client/src/views/chain/utxos/ChainUtxos.tsx b/src/client/src/views/chain/utxos/ChainUtxos.tsx
index 9d29fa13..f1d83194 100644
--- a/src/client/src/views/chain/utxos/ChainUtxos.tsx
+++ b/src/client/src/views/chain/utxos/ChainUtxos.tsx
@@ -4,7 +4,7 @@ import { useGetUtxosQuery } from '../../../graphql/queries/__generated__/getUtxo
import { DarkSubTitle } from '../../../components/generic/Styled';
import { getErrorContent } from '../../../utils/error';
import { LoadingCard } from '../../../components/loading/LoadingCard';
-import { Table } from '../../../components/table';
+import Table from '../../../components/table';
import { getAddressLink } from '../../../components/generic/helpers';
import { Price } from '../../../components/price/Price';
import { blockToTime } from '../../../utils/helpers';
@@ -29,43 +29,46 @@ export const ChainUtxos = () => {
const columns = useMemo(
() => [
{
- Header: '',
- accessor: 'index',
+ header: '',
+ accessorKey: 'index',
},
{
- Header: 'Sats',
- accessor: 'tokens',
- Cell: ({ row }: any) => (
+ header: 'Sats',
+ accessorKey: 'tokens',
+ cell: ({ row }: any) => (
),
},
{
- Header: 'Confirmations',
+ header: 'Confirmations',
columns: [
- { Header: 'Blocks', accessor: 'confirmation_count' },
+ { header: 'Blocks', accessorKey: 'confirmation_count' },
{
- Header: 'Since',
- accessor: 'time',
+ header: 'Since',
+ accessorKey: 'time',
},
],
},
{
- Header: 'Address',
+ header: 'Address',
+ enableSorting: false,
columns: [
{
- Header: 'Link',
- accessor: 'output_addresses',
- Cell: ({ row }: any) => (
+ header: 'Link',
+ enableSorting: false,
+ accessorKey: 'output_addresses',
+ cell: ({ row }: any) => (
{getAddressLink(row.original.address)}
),
},
{
- Header: 'Format',
- accessor: 'address_format',
+ header: 'Format',
+ enableSorting: false,
+ accessorKey: 'address_format',
},
],
},
@@ -82,6 +85,11 @@ export const ChainUtxos = () => {
}
return (
-
+
);
};
diff --git a/src/client/src/views/channels/channels/ChannelTable.tsx b/src/client/src/views/channels/channels/ChannelTable.tsx
index 7b8defaf..7a6377e6 100644
--- a/src/client/src/views/channels/channels/ChannelTable.tsx
+++ b/src/client/src/views/channels/channels/ChannelTable.tsx
@@ -21,7 +21,7 @@ import { LoadingCard } from '../../../components/loading/LoadingCard';
import { CloseChannel } from '../../../components/modal/closeChannel/CloseChannel';
import Modal from '../../../components/modal/ReactModal';
import { Price } from '../../../components/price/Price';
-import { Table } from '../../../components/table';
+import Table from '../../../components/table';
import { useGetChannelsQuery } from '../../../graphql/queries/__generated__/getChannels.generated';
import { useLocalStorage } from '../../../hooks/UseLocalStorage';
import { chartColors } from '../../../styles/Themes';
@@ -29,6 +29,7 @@ import { getErrorContent } from '../../../utils/error';
import { blockToTime, formatSeconds, getPercent } from '../../../utils/helpers';
import { ChannelDetails } from './ChannelDetails';
import { defaultHiddenColumns } from './helpers';
+import { VisibilityState } from '@tanstack/react-table';
const S = {
link: styled.span`
@@ -276,47 +277,52 @@ export const ChannelTable = () => {
const columns = useMemo(
() => [
{
- Header: 'Status',
+ header: 'Status',
columns: [
{
- Header: 'Active',
- accessor: 'channelActiveLogo',
+ header: 'Active',
+ accessorKey: 'channelActiveLogo',
sortType: numberStringSorting('channelActive'),
+ cell: ({ cell }: any) => cell.renderValue(),
},
{
- Header: 'Private',
- accessor: 'channelPrivateLogo',
+ header: 'Private',
+ accessorKey: 'channelPrivateLogo',
sortType: numberStringSorting('channelPrivate'),
+ cell: ({ cell }: any) => cell.renderValue(),
},
{
- Header: 'Initiated',
- accessor: 'channelOpenerLogo',
+ header: 'Initiated',
+ accessorKey: 'channelOpenerLogo',
sortType: numberStringSorting('channelOpener'),
+ cell: ({ cell }: any) => cell.renderValue(),
},
],
},
{
- Header: 'Actions',
+ header: 'Actions',
columns: [
{
- Header:
,
- accessor: 'editAction',
- disableSortBy: true,
+ header:
,
+ accessorKey: 'editAction',
+ enableSorting: false,
+ cell: ({ cell }: any) => cell.renderValue(),
},
{
- Header:
,
- accessor: 'closeAction',
- disableSortBy: true,
+ header:
,
+ accessorKey: 'closeAction',
+ enableSorting: false,
+ cell: ({ cell }: any) => cell.renderValue(),
},
],
},
{
- Header: 'Info',
+ header: 'Info',
columns: [
{
- Header: 'Peer',
- accessor: 'undercaseAlias',
- Cell: ({ row }: any) => (
+ header: 'Peer',
+ accessorKey: 'undercaseAlias',
+ cell: ({ row }: any) => (
{getNodeLink(
row.original.partner_public_key,
@@ -326,86 +332,88 @@ export const ChannelTable = () => {
),
},
{
- Header: 'Channel Id',
- accessor: 'id',
- forceVisible: true,
- Cell: ({ row }: any) => (
+ header: 'Channel Id',
+ accessorKey: 'id',
+ enableHiding: false,
+ cell: ({ row }: any) => (
{getChannelLink(row.original.id)}
),
},
{
- Header: 'Capacity',
- accessor: 'capacity',
- Cell: ({ row }: any) => (
+ header: 'Capacity',
+ accessorKey: 'capacity',
+ cell: ({ row }: any) => (
),
},
- { Header: 'Block Age', accessor: 'channel_age' },
+ { header: 'Block Age', accessorKey: 'channel_age' },
{
- Header: 'Channel Age',
- accessor: 'channel_age_duplicate',
- Cell: ({ row }: any) => (
+ header: 'Channel Age',
+ accessorKey: 'channel_age_duplicate',
+ cell: ({ row }: any) => (
{blockToTime(row.original.channel_age)}
),
},
{
- Header: 'Past States',
- accessor: 'past_states',
+ header: 'Past States',
+ accessorKey: 'past_states',
},
],
},
{
- Header: 'Balance',
+ header: 'Balance',
columns: [
{
- Header: 'Local',
- accessor: 'local_balance',
- Cell: ({ row }: any) => (
-
- ),
+ header: 'Local',
+ accessorKey: 'local_balance',
+ cell: ({ row }: any) => {
+ return (
+
+ );
+ },
},
{
- Header: 'Remote',
- accessor: 'remote_balance',
- Cell: ({ row }: any) => (
+ header: 'Remote',
+ accessorKey: 'remote_balance',
+ cell: ({ row }: any) => (
),
},
{
- Header: 'Percent',
- accessor: 'balancePercentText',
+ header: 'Percent',
+ accessorKey: 'balancePercentText',
sortType: numberStringSorting('balancePercent'),
},
],
},
{
- Header: 'Pending HTLC',
+ header: 'Pending HTLC',
columns: [
- { Header: 'Total HTLC', accessor: 'pending_total_amount' },
- { Header: 'Total Sats', accessor: 'pending_total_tokens' },
- { Header: 'Incoming HTLC', accessor: 'pending_incoming_amount' },
- { Header: 'Incoming Sats', accessor: 'pending_incoming_tokens' },
- { Header: 'Outgoing HTLC', accessor: 'pending_outgoing_amount' },
- { Header: 'Outgoing Sats', accessor: 'pending_outgoing_tokens' },
+ { header: 'Total HTLC', accessorKey: 'pending_total_amount' },
+ { header: 'Total Sats', accessorKey: 'pending_total_tokens' },
+ { header: 'Incoming HTLC', accessorKey: 'pending_incoming_amount' },
+ { header: 'Incoming Sats', accessorKey: 'pending_incoming_tokens' },
+ { header: 'Outgoing HTLC', accessorKey: 'pending_outgoing_amount' },
+ { header: 'Outgoing Sats', accessorKey: 'pending_outgoing_tokens' },
],
},
{
- Header: 'Monitoring',
+ header: 'Monitoring',
columns: [
{
- Header: 'Online',
- accessor: 'time_online',
- Cell: ({ row }: any) => (
+ header: 'Online',
+ accessorKey: 'time_online',
+ cell: ({ row }: any) => (
{formatSeconds(
Math.round((row.original.time_online || 0) / 1000)
@@ -414,9 +422,9 @@ export const ChannelTable = () => {
),
},
{
- Header: 'Offline',
- accessor: 'time_offline',
- Cell: ({ row }: any) => (
+ header: 'Offline',
+ accessorKey: 'time_offline',
+ cell: ({ row }: any) => (
{formatSeconds(
Math.round((row.original.time_offline || 0) / 1000)
@@ -425,89 +433,97 @@ export const ChannelTable = () => {
),
},
{
- Header: 'Percent',
- accessor: 'percentOnlineText',
+ header: 'Percent',
+ accessorKey: 'percentOnlineText',
sortType: numberStringSorting('percentOnline'),
},
],
},
{
- Header: 'Activity',
+ header: 'Activity',
columns: [
{
- Header: 'Sent',
- accessor: 'sent',
- Cell: ({ row }: any) => (
+ header: 'Sent',
+ accessorKey: 'sent',
+ cell: ({ row }: any) => (
),
},
{
- Header: 'Received',
- accessor: 'received',
- Cell: ({ row }: any) => (
+ header: 'Received',
+ accessorKey: 'received',
+ cell: ({ row }: any) => (
),
},
{
- Header: 'Percent',
- accessor: 'activityPercentText',
+ header: 'Percent',
+ accessorKey: 'activityPercentText',
sortType: numberStringSorting('activityPercent'),
},
],
},
{
- Header: 'My Fees',
+ header: 'My Fees',
columns: [
- { Header: 'Rate', accessor: 'myRate' },
- { Header: 'Base', accessor: 'myBase' },
+ { header: 'Rate', accessorKey: 'myRate' },
+ { header: 'Base', accessorKey: 'myBase' },
],
},
{
- Header: 'Partner Fees',
+ header: 'Partner Fees',
columns: [
- { Header: 'Rate', accessor: 'partnerRate' },
- { Header: 'Base', accessor: 'partnerBase' },
+ { header: 'Rate', accessorKey: 'partnerRate' },
+ { header: 'Base', accessorKey: 'partnerBase' },
],
},
{
- Header: 'My HTLC',
+ header: 'My HTLC',
columns: [
- { Header: 'Max', accessor: 'myMaxHtlc' },
- { Header: 'Min', accessor: 'myMinHtlc' },
+ { header: 'Max', accessorKey: 'myMaxHtlc' },
+ { header: 'Min', accessorKey: 'myMinHtlc' },
],
},
{
- Header: 'Partner HTLC',
+ header: 'Partner HTLC',
columns: [
- { Header: 'Max', accessor: 'partnerMaxHtlc' },
- { Header: 'Min', accessor: 'partnerMinHtlc' },
+ { header: 'Max', accessorKey: 'partnerMaxHtlc' },
+ { header: 'Min', accessorKey: 'partnerMinHtlc' },
],
},
{
- Header: 'Bars',
+ header: 'Bars',
columns: [
{
- Header: 'Balance',
- accessor: 'balanceBars',
+ header: 'Balance',
+ accessorKey: 'balanceBars',
sortType: numberStringSorting('balancePercent'),
+ cell: ({ cell }: any) => cell.renderValue(),
},
{
- Header: 'Proportional',
- accessor: 'proportionalBars',
+ header: 'Proportional',
+ accessorKey: 'proportionalBars',
sortType: numberStringSorting('balancePercent'),
+ cell: ({ cell }: any) => cell.renderValue(),
},
{
- Header: 'Activity',
- accessor: 'activityBars',
+ header: 'Activity',
+ accessorKey: 'activityBars',
sortType: numberStringSorting('activityPercent'),
+ cell: ({ cell }: any) => cell.renderValue(),
},
],
},
- { Header: 'Details', accessor: 'viewAction' },
+ {
+ header: 'Details',
+ accessorKey: 'viewAction',
+ enableSorting: false,
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
],
[numberStringSorting]
);
@@ -521,6 +537,14 @@ export const ChannelTable = () => {
}
};
+ const hiddenColumnState: VisibilityState = useMemo(() => {
+ const defaultColumns: VisibilityState = {};
+ hiddenColumns.forEach(c => {
+ defaultColumns[c] = false;
+ });
+ return defaultColumns;
+ }, [hiddenColumns]);
+
if (loading) {
return
;
}
@@ -552,10 +576,12 @@ export const ChannelTable = () => {
<>
setChannel(null)}>
diff --git a/src/client/src/views/channels/closedChannels/ClosedChannels.tsx b/src/client/src/views/channels/closedChannels/ClosedChannels.tsx
index c635f358..1ed26a09 100644
--- a/src/client/src/views/channels/closedChannels/ClosedChannels.tsx
+++ b/src/client/src/views/channels/closedChannels/ClosedChannels.tsx
@@ -4,7 +4,7 @@ import { useGetClosedChannelsQuery } from '../../../graphql/queries/__generated_
import { DarkSubTitle } from '../../../components/generic/Styled';
import { getErrorContent } from '../../../utils/error';
import { LoadingCard } from '../../../components/loading/LoadingCard';
-import { Table } from '../../../components/table';
+import Table from '../../../components/table';
import { Price } from '../../../components/price/Price';
import { blockToTime } from '../../../utils/helpers';
import { orderBy } from 'lodash';
@@ -56,49 +56,54 @@ export const ClosedChannels = () => {
const columns = useMemo(
() => [
{
- Header: 'Peer',
- accessor: 'alias',
- Cell: ({ row }: any) => (
+ header: 'Peer',
+ accessorKey: 'alias',
+ enableSorting: true,
+ cell: ({ row }: any) => (
{getNodeLink(row.original.partner_public_key, row.original.alias)}
),
},
{
- Header: 'Closed Since',
- accessor: 'closed_for_blocks',
- Cell: ({ row }: any) => (
+ header: 'Closed Since',
+ accessorKey: 'closed_for_blocks',
+ enableSorting: true,
+ cell: ({ row }: any) => (
{blockToTime(row.original.closed_for_blocks)}
),
},
{
- Header: 'Channel Age',
- accessor: 'channel_age',
- Cell: ({ row }: any) => (
+ header: 'Channel Age',
+ accessorKey: 'channel_age',
+ enableSorting: true,
+ cell: ({ row }: any) => (
{blockToTime(row.original.channel_age)}
),
},
{
- Header: 'Capacity',
- accessor: 'capacity',
- Cell: ({ row }: any) => (
+ header: 'Capacity',
+ accessorKey: 'capacity',
+ enableSorting: true,
+ cell: ({ row }: any) => (
),
},
{
- Header: 'Close Type',
- accessor: 'closeType',
+ header: 'Close Type',
+ accessorKey: 'closeType',
},
{
- Header: 'Transaction Id',
- accessor: 'transaction_id',
- Cell: ({ row }: any) => getTransactionLink(row.original.transaction_id),
+ header: 'Transaction Id',
+ accessorKey: 'transaction_id',
+ enableSorting: true,
+ cell: ({ row }: any) => getTransactionLink(row.original.transaction_id),
},
],
[]
@@ -114,9 +119,11 @@ export const ClosedChannels = () => {
return (
);
diff --git a/src/client/src/views/channels/pendingChannels/PendingChannels.tsx b/src/client/src/views/channels/pendingChannels/PendingChannels.tsx
index 71aa065a..58c45027 100644
--- a/src/client/src/views/channels/pendingChannels/PendingChannels.tsx
+++ b/src/client/src/views/channels/pendingChannels/PendingChannels.tsx
@@ -8,7 +8,7 @@ import {
getNodeLink,
getTransactionLink,
} from '../../../components/generic/helpers';
-import TableV2 from '../../../components/table-v2';
+import Table from '../../../components/table';
import { Price } from '../../../components/price/Price';
import { ColumnDef } from '@tanstack/react-table';
import { PendingChannel } from '../../../graphql/types';
@@ -180,10 +180,12 @@ export const PendingChannels = () => {
}
return (
-
);
diff --git a/src/client/src/views/dashboard/widgets/external/mempool.tsx b/src/client/src/views/dashboard/widgets/external/mempool.tsx
index 7532b388..43cd07fd 100644
--- a/src/client/src/views/dashboard/widgets/external/mempool.tsx
+++ b/src/client/src/views/dashboard/widgets/external/mempool.tsx
@@ -1,4 +1,4 @@
-import { Table } from '../../../../components/table';
+import Table from '../../../../components/table';
import { useBitcoinFees } from '../../../../hooks/UseBitcoinFees';
import styled from 'styled-components';
@@ -17,10 +17,10 @@ export const MempoolWidget = () => {
}
const columns = [
- { Header: 'Fastest', accessor: 'fast' },
- { Header: 'Half Hour', accessor: 'halfHour' },
- { Header: 'Hour', accessor: 'hour' },
- { Header: 'Minimum', accessor: 'minimum' },
+ { header: 'Fastest', accessorKey: 'fast' },
+ { header: 'Half Hour', accessorKey: 'halfHour' },
+ { header: 'Hour', accessorKey: 'hour' },
+ { header: 'Minimum', accessorKey: 'minimum' },
];
const data = [
@@ -34,7 +34,7 @@ export const MempoolWidget = () => {
return (
-
+
);
};
diff --git a/src/client/src/views/dashboard/widgets/lightning/forwards.tsx b/src/client/src/views/dashboard/widgets/lightning/forwards.tsx
index e14b801c..c610160a 100644
--- a/src/client/src/views/dashboard/widgets/lightning/forwards.tsx
+++ b/src/client/src/views/dashboard/widgets/lightning/forwards.tsx
@@ -1,6 +1,6 @@
import { getDateDif } from '../../../../components/generic/helpers';
import { Price } from '../../../../components/price/Price';
-import { Table } from '../../../../components/table';
+import Table from '../../../../components/table';
import { useGetForwardsQuery } from '../../../../graphql/queries/__generated__/getForwards.generated';
import { ChannelAlias } from '../../../../views/home/reports/forwardReport/ChannelAlias';
import styled from 'styled-components';
@@ -32,11 +32,31 @@ export const ForwardListWidget = () => {
const forwards = data?.getForwards || [];
const columns = [
- { Header: 'Date', accessor: 'date' },
- { Header: 'Amount', accessor: 'amount' },
- { Header: 'Fee', accessor: 'fee' },
- { Header: 'Incoming', accessor: 'incoming' },
- { Header: 'Outgoing', accessor: 'outgoing' },
+ {
+ header: 'Date',
+ accessorKey: 'date',
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
+ {
+ header: 'Amount',
+ accessorKey: 'amount',
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
+ {
+ header: 'Fee',
+ accessorKey: 'fee',
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
+ {
+ header: 'Incoming',
+ accessorKey: 'incoming',
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
+ {
+ header: 'Outgoing',
+ accessorKey: 'outgoing',
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
];
const tableData = forwards.reduce((p, f) => {
@@ -65,7 +85,7 @@ export const ForwardListWidget = () => {
Forwards
-
+
);
diff --git a/src/client/src/views/forwards/ForwardTable.tsx b/src/client/src/views/forwards/ForwardTable.tsx
index cca0e0ad..b2aa0c62 100644
--- a/src/client/src/views/forwards/ForwardTable.tsx
+++ b/src/client/src/views/forwards/ForwardTable.tsx
@@ -3,7 +3,6 @@ import { toast } from 'react-toastify';
import { ProgressBar } from '../../components/generic/CardGeneric';
import { SingleLine } from '../../components/generic/Styled';
import { getPrice } from '../../components/price/Price';
-import { Table } from '../../components/table';
import { useConfigState } from '../../context/ConfigContext';
import { usePriceState } from '../../context/PriceContext';
import { useGetForwardsQuery } from '../../graphql/queries/__generated__/getForwards.generated';
@@ -11,6 +10,7 @@ import { Forward } from '../../graphql/types';
import { getErrorContent } from '../../utils/error';
import { ChannelAlias } from '../home/reports/forwardReport/ChannelAlias';
import { sortByNode } from './helpers';
+import Table from '../../components/table';
const getBar = (top: number, bottom: number) => {
const percent = (top / bottom) * 100;
@@ -52,12 +52,36 @@ export const ForwardTable: FC<{ days: number; order: string }> = ({
);
const columns = [
- { Header: 'Alias', accessor: 'alias' },
- { Header: 'Channel', accessor: 'channel' },
- { Header: 'Incoming', accessor: 'incoming' },
- { Header: 'Outgoing', accessor: 'outgoing' },
- { Header: 'Incoming', accessor: 'incomingBar' },
- { Header: 'Outgoing', accessor: 'outgoingBar' },
+ {
+ header: 'Alias',
+ accessorKey: 'alias',
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
+ {
+ header: 'Channel',
+ accessorKey: 'channel',
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
+ {
+ header: 'Incoming',
+ accessorKey: 'incoming',
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
+ {
+ header: 'Outgoing',
+ accessorKey: 'outgoing',
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
+ {
+ header: 'Incoming',
+ accessorKey: 'incomingBar',
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
+ {
+ header: 'Outgoing',
+ accessorKey: 'outgoingBar',
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
];
const tableData = final.map(f => ({
@@ -69,5 +93,5 @@ export const ForwardTable: FC<{ days: number; order: string }> = ({
outgoingBar: ,
}));
- return ;
+ return ;
};
diff --git a/src/client/src/views/forwards/index.tsx b/src/client/src/views/forwards/index.tsx
index c4010444..dd136f78 100644
--- a/src/client/src/views/forwards/index.tsx
+++ b/src/client/src/views/forwards/index.tsx
@@ -4,10 +4,10 @@ import { getDateDif } from '../../components/generic/helpers';
import { DarkSubTitle } from '../../components/generic/Styled';
import { LoadingCard } from '../../components/loading/LoadingCard';
import { Price } from '../../components/price/Price';
-import { Table } from '../../components/table';
import { useGetForwardsQuery } from '../../graphql/queries/__generated__/getForwards.generated';
import { getErrorContent } from '../../utils/error';
import { ChannelAlias } from '../home/reports/forwardReport/ChannelAlias';
+import Table from '../../components/table';
type ForwardProps = {
days: number;
@@ -34,30 +34,30 @@ export const ForwardsList: FC = ({ days }) => {
const columns = useMemo(
() => [
{
- Header: 'Date',
- accessor: 'created_at',
- Cell: ({ row }: any) => (
+ header: 'Date',
+ accessorKey: 'created_at',
+ cell: ({ row }: any) => (
{`${getDateDif(row.original.created_at)} ago`}
),
},
{
- Header: 'Sats',
+ header: 'Sats',
columns: [
{
- Header: 'Forwarded',
- accessor: 'tokens',
- Cell: ({ row }: any) => (
+ header: 'Forwarded',
+ accessorKey: 'tokens',
+ cell: ({ row }: any) => (
),
},
{
- Header: 'Earned',
- accessor: 'fee',
- Cell: ({ row }: any) => (
+ header: 'Earned',
+ accessorKey: 'fee',
+ cell: ({ row }: any) => (
@@ -66,28 +66,32 @@ export const ForwardsList: FC = ({ days }) => {
],
},
{
- Header: 'Peer',
+ header: 'Peer',
columns: [
{
- Header: 'Incoming',
- accessor: 'incoming_name',
+ header: 'Incoming',
+ accessorKey: 'incoming_name',
+ cell: ({ cell }: any) => cell.renderValue(),
},
{
- Header: 'Outgoing',
- accessor: 'outgoing_name',
+ header: 'Outgoing',
+ accessorKey: 'outgoing_name',
+ cell: ({ cell }: any) => cell.renderValue(),
},
],
},
{
- Header: 'Channel',
+ header: 'Channel',
columns: [
{
- Header: 'Incoming',
- accessor: 'incoming_channel',
+ header: 'Incoming',
+ accessorKey: 'incoming_channel',
+ cell: ({ cell }: any) => cell.renderValue(),
},
{
- Header: 'Outgoing',
- accessor: 'outgoing_channel',
+ header: 'Outgoing',
+ accessorKeyKey: 'outgoing_channel',
+ cell: ({ cell }: any) => cell.renderValue(),
},
],
},
@@ -104,6 +108,11 @@ export const ForwardsList: FC = ({ days }) => {
}
return (
-
+
);
};
diff --git a/src/client/src/views/home/reports/forwardReport/ForwardReportTables.tsx b/src/client/src/views/home/reports/forwardReport/ForwardReportTables.tsx
index ce736f89..6f3c42f6 100644
--- a/src/client/src/views/home/reports/forwardReport/ForwardReportTables.tsx
+++ b/src/client/src/views/home/reports/forwardReport/ForwardReportTables.tsx
@@ -1,6 +1,6 @@
import { FC } from 'react';
-import { Table } from '../../../../components/table';
import { ChannelAlias } from './ChannelAlias';
+import Table from '../../../../components/table';
export type RouteType = {
route: string;
@@ -53,9 +53,21 @@ export const RouteTable: FC = ({ order, forwardArray }) => {
};
const columns = [
- { Header: 'In', accessor: 'aliasIn' },
- { Header: 'Out', accessor: 'aliasOut' },
- { Header: getTitle(), accessor: getAccesor() },
+ {
+ header: 'In',
+ accessorKey: 'aliasIn',
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
+ {
+ header: 'Out',
+ accessorKey: 'aliasOut',
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
+ {
+ header: getTitle(),
+ accessorKey: getAccesor(),
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
];
const tableData = forwardArray.map(f => ({
@@ -64,7 +76,7 @@ export const RouteTable: FC = ({ order, forwardArray }) => {
aliasOut: ,
}));
- return ;
+ return ;
};
export const ChannelTable: FC = ({
@@ -94,9 +106,21 @@ export const ChannelTable: FC = ({
};
const columns = [
- { Header: 'Alias', accessor: 'alias' },
- { Header: 'Id', accessor: 'name' },
- { Header: getTitle(), accessor: getAccesor() },
+ {
+ header: 'Alias',
+ accessorKey: 'alias',
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
+ {
+ header: 'Id',
+ accessorKey: 'name',
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
+ {
+ header: getTitle(),
+ accessorKey: getAccesor(),
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
];
const tableData = forwardArray.map(f => ({
@@ -104,5 +128,5 @@ export const ChannelTable: FC = ({
alias: ,
}));
- return ;
+ return ;
};
diff --git a/src/client/src/views/home/reports/mempool/index.tsx b/src/client/src/views/home/reports/mempool/index.tsx
index 88a5694f..7fbd1f30 100644
--- a/src/client/src/views/home/reports/mempool/index.tsx
+++ b/src/client/src/views/home/reports/mempool/index.tsx
@@ -3,7 +3,7 @@ import {
CardWithTitle,
SubTitle,
} from '../../../../components/generic/Styled';
-import { Table } from '../../../../components/table';
+import Table from '../../../../components/table';
import { useBitcoinFees } from '../../../../hooks/UseBitcoinFees';
export const MempoolReport = () => {
@@ -14,10 +14,26 @@ export const MempoolReport = () => {
}
const columns = [
- { Header: 'Fastest', accessor: 'fast' },
- { Header: 'Half Hour', accessor: 'halfHour' },
- { Header: 'Hour', accessor: 'hour' },
- { Header: 'Minimum', accessor: 'minimum' },
+ {
+ header: 'Fastest',
+ accessorKey: 'fast',
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
+ {
+ header: 'Half Hour',
+ accessorKey: 'halfHour',
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
+ {
+ header: 'Hour',
+ accessorKey: 'hour',
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
+ {
+ header: 'Minimum',
+ accessorKey: 'minimum',
+ cell: ({ cell }: any) => cell.renderValue(),
+ },
];
const data = [
@@ -33,7 +49,7 @@ export const MempoolReport = () => {
Mempool Fees
-
+
);