Skip to content

Commit 628ec0f

Browse files
tewarigtewarig
committed
fix: table bg on hover , (but hover actions are not working now ;_;)
1 parent d3d27d9 commit 628ec0f

File tree

4 files changed

+185
-60
lines changed

4 files changed

+185
-60
lines changed

‎packages/blade/src/components/Table/Table.web.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ const StyledReactTable = styled(ReactTable)<{
145145
display: 'block !important',
146146
},
147147
// for virtualized table, we need to apply some styles to tbody
148-
tr: {
148+
'.tbody > div > .tr': {
149149
display: 'grid',
150150
gridTemplateColumns: 'var(--data-table-library_grid-template-columns)',
151151
columnGap: '0',

‎packages/blade/src/components/Table/TableBody.web.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@ const _TableCell = ({ children, _hasPadding, ...rest }: TableCellProps): React.R
273273
<StyledCell
274274
tabIndex={0}
275275
role="cell"
276-
as={isVirtualized ? 'td' : undefined}
276+
// as={isVirtualized ? 'td' : undefined}
277277
$backgroundColor={backgroundColor}
278278
{...metaAttribute({ name: MetaConstants.TableCell })}
279279
{...makeAnalyticsAttribute(rest)}
@@ -482,8 +482,8 @@ const _TableRow = <Item,>({
482482
{...makeAccessible({ selected: isSelected })}
483483
{...metaAttribute({ name: MetaConstants.TableRow, testID })}
484484
{...makeAnalyticsAttribute(rest)}
485-
role={isVirtualized ? 'row' : undefined}
486-
as={isVirtualized ? 'tr' : undefined}
485+
// role={isVirtualized ? 'row' : undefined}
486+
// as={isVirtualized ? 'tr' : undefined}
487487
>
488488
{isMultiSelect && (
489489
<TableCheckboxCell

‎packages/blade/src/components/Table/TableEditableCell.web.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ const _TableEditableCell = ({
7474
return (
7575
<StyledEditableCell
7676
role="cell"
77-
as={isVirtualized ? 'td' : undefined}
77+
// as={isVirtualized ? 'td' : undefined}
7878
$backgroundColor={backgroundColor}
7979
$rowDensity={rowDensity}
8080
{...metaAttribute({ name: MetaConstants.TableCell })}
@@ -140,7 +140,7 @@ const TableEditableDropdownCell = (
140140
<TableEditableCellContext.Provider value={{ isInsideTableEditableCell: true }}>
141141
<StyledEditableCell
142142
role="cell"
143-
as={isVirtualized ? 'td' : undefined}
143+
// as={isVirtualized ? 'td' : undefined}
144144
$backgroundColor={backgroundColor}
145145
$rowDensity={rowDensity}
146146
{...metaAttribute({ name: MetaConstants.TableCell })}

‎packages/blade/src/components/Table/docs/BasicTable.stories.tsx

Lines changed: 179 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -249,56 +249,184 @@ const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
249249
};
250250

251251
export const NormalTable: StoryFn<typeof TableComponent> = ({ ...args }) => {
252+
const ref = useRef<HTMLDivElement>(null);
252253
return (
253-
<Box padding="spacing.5" overflow="auto" minHeight="400px">
254-
<TableComponent
255-
{...args}
256-
data={data}
257-
defaultSelectedIds={['1', '3']}
258-
onSelectionChange={console.log}
259-
isFirstColumnSticky
260-
height="100%"
261-
selectionType="multiple"
262-
// eslint-disable-next-line react/jsx-no-duplicate-props
263-
onSelectionChange={({ selectedIds }) => {
264-
console.log(selectedIds);
265-
// setSelectedItems(data.nodes.filter((node) => selectedIds.includes(node.id)));
266-
}}
267-
toolbar={
268-
<TableToolbar title="Showing 1-10 [Items]" selectedTitle="Showing 1-10 [Items]">
269-
<TableToolbarActions>
270-
<Button variant="secondary" marginRight="spacing.2">
271-
Export
272-
</Button>
273-
<Button>Refund</Button>
274-
</TableToolbarActions>
275-
</TableToolbar>
276-
}
277-
sortFunctions={{
278-
ID: (array) => array.sort((a, b) => Number(a.id) - Number(b.id)),
279-
AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount),
280-
PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)),
281-
DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()),
282-
STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)),
283-
}}
284-
>
285-
{(tableData) => (
286-
<>
287-
<TableHeader>
288-
<TableHeaderRow>
289-
<TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
290-
<TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
291-
<TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
292-
<TableHeaderCell headerKey="DATE">Date</TableHeaderCell>
293-
<TableHeaderCell headerKey="METHOD">Method</TableHeaderCell>
294-
<TableHeaderCell headerKey="STATUS">Status</TableHeaderCell>
295-
</TableHeaderRow>
296-
</TableHeader>
297-
<TableBody>
298-
{tableData.map((tableItem, index) => (
254+
<Box>
255+
Normal Table-
256+
<Box padding="spacing.5" overflow="auto" minHeight="400px">
257+
<TableComponent
258+
{...args}
259+
data={data}
260+
defaultSelectedIds={['1', '3']}
261+
onSelectionChange={console.log}
262+
isFirstColumnSticky
263+
height="100%"
264+
selectionType="multiple"
265+
// eslint-disable-next-line react/jsx-no-duplicate-props
266+
onSelectionChange={({ selectedIds }) => {
267+
console.log(selectedIds);
268+
// setSelectedItems(data.nodes.filter((node) => selectedIds.includes(node.id)));
269+
}}
270+
toolbar={
271+
<TableToolbar title="Showing 1-10 [Items]" selectedTitle="Showing 1-10 [Items]">
272+
<TableToolbarActions>
273+
<Button variant="secondary" marginRight="spacing.2">
274+
Export
275+
</Button>
276+
<Button>Refund</Button>
277+
</TableToolbarActions>
278+
</TableToolbar>
279+
}
280+
sortFunctions={{
281+
ID: (array) => array.sort((a, b) => Number(a.id) - Number(b.id)),
282+
AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount),
283+
PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)),
284+
DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()),
285+
STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)),
286+
}}
287+
>
288+
{(tableData) => (
289+
<>
290+
<TableHeader>
291+
<TableHeaderRow>
292+
<TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
293+
<TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
294+
<TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
295+
<TableHeaderCell headerKey="DATE">Date</TableHeaderCell>
296+
<TableHeaderCell headerKey="METHOD">Method</TableHeaderCell>
297+
<TableHeaderCell headerKey="STATUS">Status</TableHeaderCell>
298+
</TableHeaderRow>
299+
</TableHeader>
300+
<TableBody>
301+
{tableData.map((tableItem, index) => (
302+
<TableRow
303+
key={index}
304+
item={tableItem}
305+
hoverActions={
306+
<>
307+
<Button variant="tertiary" size="xsmall">
308+
View Details
309+
</Button>
310+
<IconButton
311+
icon={CheckIcon}
312+
isHighlighted
313+
accessibilityLabel="Approve"
314+
onClick={() => {
315+
console.log('Approved', tableItem.id);
316+
}}
317+
/>
318+
<IconButton
319+
icon={CloseIcon}
320+
isHighlighted
321+
accessibilityLabel="Reject"
322+
onClick={() => {
323+
console.log('Rejected', tableItem.id);
324+
}}
325+
/>
326+
</>
327+
}
328+
onClick={() => {
329+
console.log('where');
330+
}}
331+
>
332+
<TableCell>
333+
<Code size="medium">{tableItem.paymentId}</Code>
334+
</TableCell>
335+
<TableEditableCell
336+
accessibilityLabel="Amount"
337+
placeholder="Enter text"
338+
successText="Amount is valid"
339+
/>
340+
<TableCell>{tableItem.account}</TableCell>
341+
<TableCell>
342+
{tableItem.date?.toLocaleDateString('en-IN', {
343+
year: 'numeric',
344+
month: '2-digit',
345+
day: '2-digit',
346+
})}
347+
</TableCell>
348+
<TableCell>{tableItem.method}</TableCell>
349+
<TableCell>
350+
<Badge
351+
size="medium"
352+
color={
353+
tableItem.status === 'Completed'
354+
? 'positive'
355+
: tableItem.status === 'Pending'
356+
? 'notice'
357+
: tableItem.status === 'Failed'
358+
? 'negative'
359+
: 'primary'
360+
}
361+
>
362+
{tableItem.status}
363+
</Badge>
364+
</TableCell>
365+
</TableRow>
366+
))}
367+
</TableBody>
368+
</>
369+
)}
370+
</TableComponent>
371+
</Box>
372+
Virtualized Table-
373+
<Box padding="spacing.5" ref={ref} minHeight="400px">
374+
<> total rows : {nodes.length}</>
375+
<TableComponent
376+
{...args}
377+
data={data}
378+
onSelectionChange={console.log}
379+
selectionType="multiple"
380+
// height="500px"
381+
// width="800px"
382+
toolbar={
383+
<TableToolbar title="Showing 1-10 [Items]" selectedTitle="Showing 1-10 [Items]">
384+
<TableToolbarActions>
385+
<Button variant="secondary" marginRight="spacing.2">
386+
Export
387+
</Button>
388+
<Button>Refund</Button>
389+
</TableToolbarActions>
390+
</TableToolbar>
391+
}
392+
sortFunctions={{
393+
ID: (array) => array.sort((a, b) => Number(a.id) - Number(b.id)),
394+
AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount),
395+
PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)),
396+
DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()),
397+
STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)),
398+
}}
399+
ref={ref}
400+
isVirtualized
401+
defaultSelectedIds={['1', '3']}
402+
>
403+
{(tableData) => (
404+
<TableVirtulized
405+
tableData={tableData}
406+
rowHeight={(item, index) => {
407+
// header height and row height
408+
return index === 0 ? 50 : 57.5;
409+
}}
410+
// header={()=>{}}
411+
header={() => (
412+
<TableHeader>
413+
<TableHeaderRow>
414+
<TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
415+
<TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
416+
<TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
417+
<TableHeaderCell headerKey="DATE">Date</TableHeaderCell>
418+
<TableHeaderCell headerKey="METHOD">Method</TableHeaderCell>
419+
<TableHeaderCell headerKey="STATUS">Status </TableHeaderCell>
420+
</TableHeaderRow>
421+
</TableHeader>
422+
)}
423+
body={(tableItem, index) => (
299424
<TableRow
300425
key={index}
301426
item={tableItem}
427+
onClick={() => {
428+
console.log('where');
429+
}}
302430
hoverActions={
303431
<>
304432
<Button variant="tertiary" size="xsmall">
@@ -322,9 +450,6 @@ export const NormalTable: StoryFn<typeof TableComponent> = ({ ...args }) => {
322450
/>
323451
</>
324452
}
325-
onClick={() => {
326-
console.log('where');
327-
}}
328453
>
329454
<TableCell>
330455
<Code size="medium">{tableItem.paymentId}</Code>
@@ -360,11 +485,11 @@ export const NormalTable: StoryFn<typeof TableComponent> = ({ ...args }) => {
360485
</Badge>
361486
</TableCell>
362487
</TableRow>
363-
))}
364-
</TableBody>
365-
</>
366-
)}
367-
</TableComponent>
488+
)}
489+
/>
490+
)}
491+
</TableComponent>
492+
</Box>
368493
</Box>
369494
);
370495
};

0 commit comments

Comments
 (0)