I have this TransactionsSearchResults component where I pass as a child a TransactionsTable. This table is reused in other parts of the application. But when It is rendered in TransactionsSearchResults I need to hide the column balance. I tried using "show" in react table but does not work I tried to use initialState but it was not clear how to use it. Will I have to pass a state prop from TransactionsSearchResults to TransactionsTable and if that prop is true then initialState will be triggered ?
interface Props {
onRowClick?: (
event: MouseEvent<HTMLElement>,
rowData: TransactionData
) => void;
onSuccess: (transaction: TransactionData | undefined) => void;
searchParams: any;
}
const TransactionsSearchResults: FC<Props> = ({
onRowClick,
searchParams,
onSuccess
}) => {
const { currentData, error, isFetching, isSuccess } =
useFetchTransactionsQuery(searchParams);
useEffect(() => {
if (!isFetching && isSuccess) {
onSuccess(currentData?.data[0]);
}
}, [isFetching, isSuccess, currentData]);
const transactions = currentData?.data || ([] as TransactionData[]);
console.log(transactions.length, 'trans');
return (
<div className="search__payouts">
{error && 'error' in error && (
<div className="flex h-screen items-center justify-center">
<div>{error.error}</div>
</div>
)}
{transactions.length > 0 && (
<TransactionsTable
data={transactions}
title={
<>
<span className="font-bold">Search result: </span>
Account Transactions {transactions.length}
</>
}
onRowClick={onRowClick}
/>
)}
{isFetching && (
<div className="flex h-40 w-full items-center justify-center">
Searching transactions
</div>
)}
</div>
);
};
export default TransactionsSearchResults;
This is the table itself. Where I am supposed to use initialState and how I used it. But I am not sure how to pass it only when the parent component is the TransactionsSearchResults. In other words hiding the balance column when this table is rendered in the search result page
interface TransactionsTableProps extends Omit<DataTableProps, 'columns'> {
data: TransactionData[];
onRowClick?: (event: React.MouseEvent<HTMLElement>, rowData: any) => void;
totalCounters?: number;
}
const initialState = { hiddenColumns: ['running_balance'] };
const TransactionsTable: FC<TransactionsTableProps> = (props) => {
const columns = useMemo<ColumnDef<TransactionData>[]>(
() => [
{
id: 'amount_icon',
accessorKey: 'amount',
className: 'w-16 !p-0',
cell: (info) => {
const value = info.getValue<number>();
return (
<div className="relative m-auto w-6">
<DatabaseIcon className="w-6 stroke-inpay-black-haze-500 stroke-1 group-hover:stroke-inpay-cascade" />
{value < 0 && (
<MinusCircleIcon className="absolute top-2.5 left-2.5 w-5 fill-rose-200 stroke-1 " />
)}
{value >= 0 && (
<PlusCircleIcon className="absolute top-2.5 left-2.5 w-5 fill-green-100 stroke-1" />
)}
</div>
);
}
},
// Add spacing (probably not required with a bit of CSS)
{
id: 'space-0',
className: 'w-10'
},
{
id: 'date',
accessorKey: 'created_at',
className: 'grow-0 cursor-pointer',
header: 'Date',
cell: (info) => {
const day = dayjs(info.getValue());
return (
<div className="w-20">
<FormattedDate value={info.getValue()} />
<div className="text-base font-semibold">
{day.format('HH:mm:ss')}
</div>
</div>
);
}
},
{
id: 'id_reference',
header: 'ID/Reference',
accessorKey: 'reference',
className: 'cursor-pointer',
cell: (info) => {
return (
<div className="m-auto text-left uppercase">
<FormattedIdentifier value={info.getValue()} />
</div>
);
}
},
{
id: 'description',
accessorKey: 'entry_type',
header: 'Description',
className: 'cursor-pointer',
cell: (info) => {
return (
<div className="m-auto text-left text-base font-semibold uppercase">
{info.getValue()}
</div>
);
}
},
{
id: 'amount',
accessorFn: (row) => ({
amount: row.amount,
currency: row.currency
}),
className: 'text-right cursor-pointer',
header: 'Amount',
cell: (info) => {
const { currency, amount } = info.getValue<{
amount: number;
currency: string;
}>();
return (
<div className="m-auto ">
<div className="text-xs font-normal uppercase">{currency}</div>
<div className="text-base font-semibold">{amount}</div>
</div>
);
}
},
{
id: 'running_balance',
accessorFn: (row) => ({
running_balance: row.running_balance,
currency: row.currency
}),
initialState,
className: 'text-right cursor-pointer',
enableSorting: false,
header: 'Balance',
cell: (info) => {
const { currency, running_balance } = info.getValue<{
running_balance: number;
currency: string;
}>();
return (
<div className="m-auto">
<div className="text-xs font-normal uppercase">{currency}</div>
<div className="text-base font-semibold">{running_balance}</div>
</div>
);
}
},
// Add spacing (probably not required with a bit of CSS)
{
id: 'space-4',
className: 'min-w-[1rem] w-10'
},
{
id: 'column_params',
className: 'w-10',
cell: () => (
<ChevronRightIcon className="-ml-2 h-7 stroke-inpay-black-haze-700 group-hover:stroke-inpay-black-500 group-active:stroke-inpay-black-500" />
)
}
],
[]
);
return <DataTable columns={columns} {...props} className="min-w-[700px]" />;
};
export default TransactionsTable;