From e8d90c35c9ddc08666d857510bf8ccdbb3f1d5a5 Mon Sep 17 00:00:00 2001 From: Chaitanya Deorukhkar Date: Fri, 24 Nov 2023 17:28:46 +0530 Subject: [PATCH] test: add `Table` tests (#1841) --- packages/blade/jest.web.config.js | 3 +- .../src/components/Table/Table.native.tsx | 8 + .../src/components/Table/TableBody.native.tsx | 7 +- .../src/components/Table/TableBody.web.tsx | 1 + .../src/components/Table/TableHeader.web.tsx | 2 +- .../components/Table/TablePagination.web.tsx | 1 - .../src/components/Table/TableToolbar.web.tsx | 2 +- .../Table/__tests__/Table.native.test.tsx | 38 + .../Table/__tests__/Table.web.test.tsx | 809 ++ .../__snapshots__/Table.web.test.tsx.snap | 7040 +++++++++++++++++ 10 files changed, 7904 insertions(+), 7 deletions(-) create mode 100644 packages/blade/src/components/Table/__tests__/Table.native.test.tsx create mode 100644 packages/blade/src/components/Table/__tests__/Table.web.test.tsx create mode 100644 packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap diff --git a/packages/blade/jest.web.config.js b/packages/blade/jest.web.config.js index 051a6f53ccd..35b701638a4 100644 --- a/packages/blade/jest.web.config.js +++ b/packages/blade/jest.web.config.js @@ -14,8 +14,9 @@ const baseConfig = { moduleFileExtensions: ['web.ts', 'web.tsx', 'ts', 'tsx', 'js', 'json', 'node'], testMatch: ['**/*.test.{ts,tsx}'], transform: { - '\\.(js|ts|tsx)?$': 'babel-jest', + '\\.(js|ts|tsx)?$': './jest-preprocess.js', }, + transformIgnorePatterns: ['/node_modules/(?!(@table-library)/)'], testEnvironment: 'jsdom', setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect', './jest-setup.web.js'], moduleNameMapper: { diff --git a/packages/blade/src/components/Table/Table.native.tsx b/packages/blade/src/components/Table/Table.native.tsx index 773a2bd57cd..c0a134dec7e 100644 --- a/packages/blade/src/components/Table/Table.native.tsx +++ b/packages/blade/src/components/Table/Table.native.tsx @@ -3,8 +3,16 @@ import React from 'react'; import type { TableProps } from './types'; import { Text } from '~components/Typography'; +import { logger } from '~utils/logger'; const Table = (props: TableProps): React.ReactElement => { + if (__DEV__) { + logger({ + type: 'warn', + moduleName: 'Table', + message: 'Table Component is not available for Native mobile apps.', + }); + } return Table Component is not available for Native mobile apps.; }; diff --git a/packages/blade/src/components/Table/TableBody.native.tsx b/packages/blade/src/components/Table/TableBody.native.tsx index 230ce14d80e..9fdf31d16a2 100644 --- a/packages/blade/src/components/Table/TableBody.native.tsx +++ b/packages/blade/src/components/Table/TableBody.native.tsx @@ -1,17 +1,18 @@ /* eslint-disable react/no-unused-prop-types */ /* eslint-disable @typescript-eslint/no-unused-vars */ import React from 'react'; +import type { TableBodyProps, TableCellProps, TableRowProps } from './types'; import { Text } from '~components/Typography'; -const TableBody = (props: unknown): React.ReactElement => { +const TableBody = (props: TableBodyProps): React.ReactElement => { return Table Component is not available for Native mobile apps.; }; -const TableRow = (props: unknown): React.ReactElement => { +const TableRow = (props: TableRowProps): React.ReactElement => { return Table Component is not available for Native mobile apps.; }; -const TableCell = (props: unknown): React.ReactElement => { +const TableCell = (props: TableCellProps): React.ReactElement => { return Table Component is not available for Native mobile apps.; }; diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index c7200ffa911..b0d7cd979ad 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -187,6 +187,7 @@ const _TableCell = ({ children }: TableCellProps): React.ReactElement => { return ( diff --git a/packages/blade/src/components/Table/TableHeader.web.tsx b/packages/blade/src/components/Table/TableHeader.web.tsx index 18552cf6424..2c0869e547c 100644 --- a/packages/blade/src/components/Table/TableHeader.web.tsx +++ b/packages/blade/src/components/Table/TableHeader.web.tsx @@ -178,7 +178,7 @@ const _TableHeaderRow = ({ children }: TableHeaderRowProps): React.ReactElement const isAllSelected = selectedRows && selectedRows.length === totalItems; const isIndeterminate = selectedRows && selectedRows.length > 0 && !isAllSelected; return ( - + {isMultiSelect && ( { handlePageChange(currentPage + 1); - console.log('next page'); }} isDisabled={shouldDisableNextPage()} /> diff --git a/packages/blade/src/components/Table/TableToolbar.web.tsx b/packages/blade/src/components/Table/TableToolbar.web.tsx index 04d8ed35185..7c15f52bb4d 100644 --- a/packages/blade/src/components/Table/TableToolbar.web.tsx +++ b/packages/blade/src/components/Table/TableToolbar.web.tsx @@ -66,7 +66,7 @@ const _TableToolbar = ({ ? `Showing ${currentPaginationState.page * currentPaginationState.size + 1}-${ currentPaginationState.page * currentPaginationState.size + currentPaginationState.size } Items` - : `Showing 1 to ${totalItems} Items`; + : `Showing 1-${totalItems} Items`; const selectedItemsCount = selectedRows ? selectedRows.length : 0; const selectedTitle = isSelected ? controlledSelectedTitle ?? diff --git a/packages/blade/src/components/Table/__tests__/Table.native.test.tsx b/packages/blade/src/components/Table/__tests__/Table.native.test.tsx new file mode 100644 index 00000000000..e19962e21fd --- /dev/null +++ b/packages/blade/src/components/Table/__tests__/Table.native.test.tsx @@ -0,0 +1,38 @@ +/* eslint-disable @typescript-eslint/no-empty-function */ +import React from 'react'; +import { Table } from '../Table'; +import type { TableProps } from '../types'; +import { TableBody, TableRow, TableCell } from '../TableBody'; +import renderWithTheme from '~utils/testing/renderWithTheme.native'; + +const data: TableProps<{ name: string; id: string }>['data'] = { + nodes: [ + { + name: 'John Doe', + id: '1', + }, + ], +}; + +describe('Table', () => { + it('renders proper information on unavailability of Table on native', () => { + const mockConsoleWarn = jest.spyOn(console, 'warn').mockImplementation(); + + const { getByText } = renderWithTheme( + + {(tableData) => ( + + + Cell 1 + + + )} +
, + ); + expect(getByText('Table Component is not available for Native mobile apps.')).toBeTruthy(); + expect(console.warn).toHaveBeenCalledWith( + '[Blade: Table]: Table Component is not available for Native mobile apps.', + ); + mockConsoleWarn.mockRestore(); + }); +}); diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx new file mode 100644 index 00000000000..76db1a18e92 --- /dev/null +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -0,0 +1,809 @@ +import userEvent from '@testing-library/user-event'; +import { fireEvent, waitFor } from '@testing-library/react'; +import { Table } from '../Table'; +import { TableBody, TableCell, TableRow } from '../TableBody'; +import { TableFooter, TableFooterCell, TableFooterRow } from '../TableFooter'; +import { TableHeader, TableHeaderCell, TableHeaderRow } from '../TableHeader'; +import { TableToolbar } from '../TableToolbar'; +import { TablePagination } from '../TablePagination'; +import renderWithTheme from '~utils/testing/renderWithTheme.web'; +import { Amount } from '~components/Amount'; + +type Item = { + id: string; + paymentId: string; + amount: number; + status: string; + type: string; + method: string; + name: string; +}; + +const nodes: Item[] = [ + { + id: '1', + paymentId: 'rzp01', + amount: 100, + status: 'pending', + type: 'credit', + method: 'Netbanking', + name: 'John Doe', + }, + { + id: '2', + paymentId: 'rzp02', + amount: 240, + status: 'pending', + type: 'credit', + method: 'UPI', + name: 'Jane Doe', + }, + { + id: '3', + paymentId: 'rzp03', + amount: 120, + status: 'failed', + type: 'debit', + method: 'Debit Card', + name: 'Alice Smith', + }, + { + id: '4', + paymentId: 'rzp04', + amount: 300, + status: 'completed', + type: 'credit', + method: 'Credit Card', + name: 'Bob Smith', + }, + { + id: '5', + paymentId: 'rzp05', + amount: 200, + status: 'completed', + type: 'credit', + method: 'Netbanking', + name: 'John Doe', + }, + { + id: '6', + paymentId: 'rzp06', + amount: 240, + status: 'pending', + type: 'credit', + method: 'UPI', + name: 'Jane Doe', + }, + { + id: '7', + paymentId: 'rzp07', + amount: 120, + status: 'failed', + type: 'debit', + method: 'Debit Card', + name: 'Alice Smith', + }, + { + id: '8', + paymentId: 'rzp08', + amount: 300, + status: 'completed', + type: 'credit', + method: 'Credit Card', + name: 'Bob Smith', + }, + { + id: '9', + paymentId: 'rzp09', + amount: 200, + status: 'completed', + type: 'credit', + method: 'Netbanking', + name: 'John Doe', + }, + { + id: '10', + paymentId: 'rzp10', + amount: 240, + status: 'pending', + type: 'credit', + method: 'UPI', + name: 'Jane Doe', + }, + { + id: '11', + paymentId: 'rzp11', + amount: 120, + status: 'failed', + type: 'debit', + method: 'Debit Card', + name: 'Alice Smith', + }, + { + id: '12', + paymentId: 'rzp12', + amount: 300, + status: 'completed', + type: 'credit', + method: 'Credit Card', + name: 'Bob Smith', + }, + { + id: '13', + paymentId: 'rzp13', + amount: 200, + status: 'completed', + type: 'credit', + method: 'Netbanking', + name: 'John Doe', + }, + { + id: '14', + paymentId: 'rzp14', + amount: 240, + status: 'pending', + type: 'credit', + method: 'UPI', + name: 'Jane Doe', + }, + { + id: '15', + paymentId: 'rzp15', + amount: 120, + status: 'failed', + type: 'debit', + method: 'Debit Card', + name: 'Alice Smith', + }, + { + id: '16', + paymentId: 'rzp16', + amount: 300, + status: 'completed', + type: 'credit', + method: 'Credit Card', + name: 'Bob Smith', + }, + { + id: '17', + paymentId: 'rzp17', + amount: 200, + status: 'completed', + type: 'credit', + method: 'Netbanking', + name: 'John Doe', + }, + { + id: '18', + paymentId: 'rzp18', + amount: 240, + status: 'pending', + type: 'credit', + method: 'UPI', + name: 'Jane Doe', + }, + { + id: '19', + paymentId: 'rzp19', + amount: 120, + status: 'failed', + type: 'debit', + method: 'Debit Card', + name: 'Alice Smith', + }, + { + id: '20', + paymentId: 'rzp20', + amount: 300, + status: 'completed', + type: 'credit', + method: 'Credit Card', + name: 'Bob Smith', + }, + { + id: '21', + paymentId: 'rzp21', + amount: 200, + status: 'completed', + type: 'credit', + method: 'Netbanking', + name: 'John Doe', + }, + { + id: '22', + paymentId: 'rzp22', + amount: 240, + status: 'pending', + type: 'credit', + method: 'UPI', + name: 'Jane Doe', + }, + { + id: '23', + paymentId: 'rzp23', + amount: 120, + status: 'failed', + type: 'debit', + method: 'Debit Card', + name: 'Alice Smith', + }, + { + id: '24', + paymentId: 'rzp24', + amount: 300, + status: 'completed', + type: 'credit', + method: 'Credit Card', + name: 'Bob Smith', + }, + { + id: '25', + paymentId: 'rzp25', + amount: 200, + status: 'completed', + type: 'credit', + method: 'Netbanking', + name: 'John Doe', + }, +]; + +describe('', () => { + it('should render table', () => { + const { container, getAllByRole } = renderWithTheme( +
}> + {(tableData) => ( + <> + + + Payment ID + Amount + Status + Type + Method + Name + + + + {tableData.map((tableItem, index) => ( + + {tableItem.paymentId} + {tableItem.amount} + {tableItem.status} + {tableItem.type} + {tableItem.method} + {tableItem.name} + + ))} + + + + - + - + - + - + - + - + + + + )} +
, + ); + expect(container).toMatchSnapshot(); + expect(getAllByRole('row')).toHaveLength(5); + expect(getAllByRole('rowgroup')).toHaveLength(3); + expect(getAllByRole('columnheader')).toHaveLength(6); + expect(getAllByRole('cell')).toHaveLength(30); + expect(getAllByRole('rowheader')).toHaveLength(1); + expect(getAllByRole('rowfooter')).toHaveLength(1); + expect(getAllByRole('columnfooter')).toHaveLength(6); + }); + + it('should render table with comfortable rowDensity', () => { + const { container } = renderWithTheme( + + {(tableData) => ( + <> + + + Payment ID + Amount + Status + Type + Method + Name + + + + {tableData.map((tableItem, index) => ( + + {tableItem.paymentId} + {tableItem.amount} + {tableItem.status} + {tableItem.type} + {tableItem.method} + {tableItem.name} + + ))} + + + + - + - + - + - + - + - + + + + )} +
, + ); + expect(container).toMatchSnapshot(); + }); + + it('should render table with showStripedRows', () => { + const { container } = renderWithTheme( + + {(tableData) => ( + <> + + + Payment ID + Amount + Status + Type + Method + Name + + + + {tableData.map((tableItem, index) => ( + + {tableItem.paymentId} + {tableItem.amount} + {tableItem.status} + {tableItem.type} + {tableItem.method} + {tableItem.name} + + ))} + + + + - + - + - + - + - + - + + + + )} +
, + ); + expect(container).toMatchSnapshot(); + }); + + it('should render table with surfaceLevel', () => { + const { container } = renderWithTheme( + + {(tableData) => ( + <> + + + Payment ID + Amount + Status + Type + Method + Name + + + + {tableData.map((tableItem, index) => ( + + {tableItem.paymentId} + {tableItem.amount} + {tableItem.status} + {tableItem.type} + {tableItem.method} + {tableItem.name} + + ))} + + + + - + - + - + - + - + - + + + + )} +
, + ); + expect(container).toMatchSnapshot(); + }); + + it('should render table with isLoading', () => { + const { container } = renderWithTheme( + + {(tableData) => ( + <> + + + Payment ID + Amount + Status + Type + Method + Name + + + + {tableData.map((tableItem, index) => ( + + {tableItem.paymentId} + {tableItem.amount} + {tableItem.status} + {tableItem.type} + {tableItem.method} + {tableItem.name} + + ))} + + + + - + - + - + - + - + - + + + + )} +
, + ); + expect(container).toMatchSnapshot(); + }); + + it('should render table with isRefreshing', () => { + const { container } = renderWithTheme( + + {(tableData) => ( + <> + + + Payment ID + Amount + Status + Type + Method + Name + + + + {tableData.map((tableItem, index) => ( + + {tableItem.paymentId} + {tableItem.amount} + {tableItem.status} + {tableItem.type} + {tableItem.method} + {tableItem.name} + + ))} + + + + - + - + - + - + - + - + + + + )} +
, + ); + expect(container).toMatchSnapshot(); + }); + + it('should render table with sticky header, footer & first column', () => { + const { container } = renderWithTheme( + + {(tableData) => ( + <> + + + Payment ID + Amount + Status + Type + Method + Name + + + + {tableData.map((tableItem, index) => ( + + {tableItem.paymentId} + {tableItem.amount} + {tableItem.status} + {tableItem.type} + {tableItem.method} + {tableItem.name} + + ))} + + + + - + - + - + - + - + - + + + + )} +
, + ); + expect(container).toMatchSnapshot(); + }); + + it('should render table with sorting', () => { + const onSortChange = jest.fn(); + const { getByLabelText, getAllByRole } = renderWithTheme( + array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)), + }} + onSortChange={onSortChange} + > + {(tableData) => ( + <> + + + Payment ID + Amount + Status + Type + Method + Name + + + + {tableData.map((tableItem, index) => ( + + {tableItem.paymentId} + {tableItem.amount} + {tableItem.status} + {tableItem.type} + {tableItem.method} + {tableItem.name} + + ))} + + + )} +
, + ); + const sortButton = getByLabelText('Toggle Sort'); + expect(sortButton).toBeInTheDocument(); + fireEvent.click(sortButton); + expect(getAllByRole('row')[0]).toHaveTextContent('pending'); + expect(onSortChange).toHaveBeenCalledWith({ sortKey: 'STATUS', isSortReversed: false }); + fireEvent.click(sortButton); + expect(onSortChange).toHaveBeenCalledWith({ sortKey: 'STATUS', isSortReversed: true }); + expect(getAllByRole('row')[0]).toHaveTextContent('completed'); + }); + + it('should render table with single select', async () => { + const onSelectionChange = jest.fn(); + const user = userEvent.setup(); + const { getByText } = renderWithTheme( + + {(tableData) => ( + <> + + + Payment ID + Amount + Status + Type + Method + Name + + + + {tableData.map((tableItem, index) => ( + + {tableItem.paymentId} + {tableItem.amount} + {tableItem.status} + {tableItem.type} + {tableItem.method} + {tableItem.name} + + ))} + + + )} +
, + ); + + const firstSelectableRow = getByText('rzp01').closest('td'); + if (firstSelectableRow) await user.click(firstSelectableRow); + expect(onSelectionChange).toHaveBeenCalledWith({ values: [nodes[0]] }); + const secondSelectableRow = getByText('rzp02').closest('td'); + if (secondSelectableRow) await user.click(secondSelectableRow); + expect(onSelectionChange).toHaveBeenCalledWith({ values: [nodes[1]] }); + }); + + it('should render table with multi select', async () => { + const onSelectionChange = jest.fn(); + const user = userEvent.setup(); + const { getByText, getAllByRole } = renderWithTheme( + } + > + {(tableData) => ( + <> + + + Payment ID + Amount + Status + Type + Method + Name + + + + {tableData.map((tableItem, index) => ( + + {tableItem.paymentId} + + + + {tableItem.status} + {tableItem.type} + {tableItem.method} + {tableItem.name} + + ))} + + + )} +
, + ); + + expect(getByText('Showing 1-5 Items')).toBeInTheDocument(); + expect(getAllByRole('checkbox')).toHaveLength(6); + const firstSelectableRow = getByText('rzp01').closest('td'); + if (firstSelectableRow) await user.click(firstSelectableRow); + expect(onSelectionChange).toHaveBeenCalledWith({ values: [nodes[0]] }); + const secondSelectableRow = getByText('rzp02').closest('td'); + if (secondSelectableRow) await user.click(secondSelectableRow); + expect(onSelectionChange).toHaveBeenCalledWith({ values: [nodes[0], nodes[1]] }); + expect(getByText('2 Items Selected')).toBeInTheDocument(); + const deselectButton = getByText('Deselect'); + await user.click(deselectButton); + expect(onSelectionChange).toHaveBeenCalledWith({ values: [] }); + }); + + it('should render table with pagination', async () => { + const onPageChange = jest.fn(); + const onPageSizeChange = jest.fn(); + const user = userEvent.setup(); + const { getByLabelText, queryByText, getByRole, getAllByRole } = renderWithTheme( + + } + > + {(tableData) => ( + <> + + + Payment ID + Amount + Status + Type + Method + Name + + + + {tableData.map((tableItem, index) => ( + + {tableItem.paymentId} + {tableItem.amount} + {tableItem.status} + {tableItem.type} + {tableItem.method} + {tableItem.name} + + ))} + + + + - + - + - + - + - + - + + + + )} +
, + ); + const nextPageButton = getByLabelText('Next Page'); + const previousPageButton = getByLabelText('Previous Page'); + const goForward5PagesButton = getByLabelText('Go forward 5 pages'); + // Check if pagination buttons work + expect(nextPageButton).toBeInTheDocument(); + expect(previousPageButton).toBeInTheDocument(); + expect(goForward5PagesButton).toBeInTheDocument(); + expect(queryByText('rzp01')).toBeInTheDocument(); + // Go to next page + fireEvent.click(nextPageButton); + expect(queryByText('rzp01')).not.toBeInTheDocument(); + expect(queryByText('rzp11')).toBeInTheDocument(); + expect(onPageChange).toHaveBeenCalledTimes(1); + // Go to previous page + fireEvent.click(previousPageButton); + expect(queryByText('rzp01')).toBeInTheDocument(); + + // Check if page size picker works + const selectInput = getByRole('combobox', { name: 'Select pages per row' }); + expect(getAllByRole('row')).toHaveLength(10); + expect(selectInput).toBeInTheDocument(); + await user.click(selectInput); + await waitFor(() => expect(getByRole('listbox')).toBeVisible()); + await user.click(getByRole('option', { name: '25' })); + expect(getAllByRole('row')).toHaveLength(25); + await user.click(goForward5PagesButton); + expect(onPageChange).toHaveBeenLastCalledWith({ page: 5 }); + const goBack5PagesButton = getByLabelText('Go back 5 pages'); + fireEvent.click(goBack5PagesButton); + expect(onPageChange).toHaveBeenLastCalledWith({ page: 0 }); + }, 10000); +}); diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap new file mode 100644 index 00000000000..ff5d47047ea --- /dev/null +++ b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap @@ -0,0 +1,7040 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render table 1`] = ` +.c0 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + position: relative; +} + +.c1 { + background-color: hsla(0,0%,100%,1); +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + padding: 12px; + gap: 16px; + background-color: transparent; +} + +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c11 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 100%; +} + +.c12 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + pointer-events: auto; +} + +.c5 { + color: hsla(217,56%,17%,1); + font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 0.875rem; + font-weight: 700; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + margin: 0; + padding: 0; +} + +.c14 { + color: hsla(217,56%,17%,1); + font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + margin: 0; + padding: 0; +} + +.c8.c8.c8 { + border: none; + -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); +} + +.c8.c8.c8 tr:last-child .cell-wrapper { + border-bottom: none; +} + +.c8.c8.c8 .row-select-single-selected .cell-wrapper-base, +.c8.c8.c8 .row-select-selected .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.09); +} + +.c8.c8.c8 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, +.c8.c8.c8 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.18); +} + +.c8.c8.c8 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, +.c8.c8.c8 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.09); +} + +.c8.c8.c8 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, +.c8.c8.c8 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.18); +} + +.c10.c10.c10 { + height: 100%; + background-color: hsla(0,0%,100%,1); +} + +.c10.c10.c10 > div:first-child { + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; +} + +.c10.c10.c10:focus-visible { + outline: none; + box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset; +} + +.c13.c13.c13 { + -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); + background-color: transparent; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 12px; + padding-right: 12px; + height: 100%; + border-bottom-width: 1px; + border-bottom-color: hsla(216,15%,54%,0.18); + border-bottom-style: solid; +} + +.c9.c9.c9 { + background-color: transparent; +} + +.c9.c9.c9:focus { + outline: none; + box-shadow: 0 0 0 2px hsla(218,89%,51%,0.09); +} + +.c15.c15.c15 { + background-color: hsla(216,15%,54%,0.09); +} + +.c15.c15.c15 tr:last-child th { + border-bottom: none; +} + +.c16.c16.c16 { + height: 100%; + background-color: hsla(0,0%,100%,1); + border-bottom-width: 1px; + border-top-width: 1px; + border-bottom-color: hsla(216,15%,54%,0.18); + border-top-color: hsla(216,15%,54%,0.18); + border-bottom-style: solid; + border-top-style: solid; +} + +.c16.c16.c16 > div { + background-color: hsla(216,15%,54%,0.09); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + height: 100%; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 12px; + padding-right: 12px; +} + +.c6.c6.c6 tr:first-child th { + border-top: none; +} + +.c7.c7.c7 { + background-color: hsla(0,0%,100%,1); + height: 100%; + border-bottom-width: 1px; + border-top-width: 1px; + border-bottom-color: hsla(216,15%,54%,0.18); + border-top-color: hsla(216,15%,54%,0.18); + border-bottom-style: solid; + border-top-style: solid; + cursor: auto; +} + +.c7.c7.c7 > div { + background-color: hsla(216,15%,54%,0.09); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 100%; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 12px; + padding-right: 12px; +} + +.c7.c7.c7:focus-visible { + box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset; + outline: none; +} + +.c3 { + -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); +} + +@media screen and (min-width:320px) { + .c12 { + pointer-events: auto; + } +} + +@media screen and (min-width:480px) { + .c12 { + pointer-events: auto; + } +} + +@media screen and (min-width:768px) { + .c12 { + pointer-events: auto; + } +} + +@media screen and (min-width:1024px) { + .c12 { + pointer-events: auto; + } +} + +@media screen and (min-width:1200px) { + .c12 { + pointer-events: auto; + } +} + +
+
+
+
+
+
+

+ Showing 1-5 Items +

+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

+ Payment ID +

+
+ 		+
+

+ Amount +

+
+ 		+
+

+ Status +

+
+ 		+
+

+ Type +

+
+ 		+
+

+ Method +

+
+ 		+
+

+ Name +

+
+
+
+
+
+

+ rzp01 +

+
+
+
+ 		+
+
+
+ 100 +
+
+
+ 		+
+
+
+

+ pending +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ Netbanking +

+
+
+
+ 		+
+
+
+

+ John Doe +

+
+
+
+
+
+
+
+

+ rzp02 +

+
+
+
+ 		+
+
+
+ 240 +
+
+
+ 		+
+
+
+

+ pending +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ UPI +

+
+
+
+ 		+
+
+
+

+ Jane Doe +

+
+
+
+
+
+
+
+

+ rzp03 +

+
+
+
+ 		+
+
+
+ 120 +
+
+
+ 		+
+
+
+

+ failed +

+
+
+
+ 		+
+
+
+

+ debit +

+
+
+
+ 		+
+
+
+

+ Debit Card +

+
+
+
+ 		+
+
+
+

+ Alice Smith +

+
+
+
+
+
+
+
+

+ rzp04 +

+
+
+
+ 		+
+
+
+ 300 +
+
+
+ 		+
+
+
+

+ completed +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ Credit Card +

+
+
+
+ 		+
+
+
+

+ Bob Smith +

+
+
+
+
+
+
+
+

+ rzp05 +

+
+
+
+ 		+
+
+
+ 200 +
+
+
+ 		+
+
+
+

+ completed +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ Netbanking +

+
+
+
+ 		+
+
+
+

+ John Doe +

+
+
+
+
+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+
+ + +`; + +exports[` should render table with comfortable rowDensity 1`] = ` +.c0 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + position: relative; +} + +.c7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 100%; +} + +.c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + pointer-events: auto; +} + +.c3 { + color: hsla(217,56%,17%,1); + font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 0.875rem; + font-weight: 700; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + margin: 0; + padding: 0; +} + +.c10 { + color: hsla(217,56%,17%,1); + font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + margin: 0; + padding: 0; +} + +.c4.c4.c4 { + border: none; + -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); +} + +.c4.c4.c4 tr:last-child .cell-wrapper { + border-bottom: none; +} + +.c4.c4.c4 .row-select-single-selected .cell-wrapper-base, +.c4.c4.c4 .row-select-selected .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.09); +} + +.c4.c4.c4 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, +.c4.c4.c4 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.18); +} + +.c4.c4.c4 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, +.c4.c4.c4 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.09); +} + +.c4.c4.c4 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, +.c4.c4.c4 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.18); +} + +.c6.c6.c6 { + height: 100%; + background-color: hsla(0,0%,100%,1); +} + +.c6.c6.c6 > div:first-child { + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; +} + +.c6.c6.c6:focus-visible { + outline: none; + box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset; +} + +.c9.c9.c9 { + -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); + background-color: transparent; + padding-top: 20px; + padding-bottom: 20px; + padding-left: 12px; + padding-right: 12px; + height: 100%; + border-bottom-width: 1px; + border-bottom-color: hsla(216,15%,54%,0.18); + border-bottom-style: solid; +} + +.c5.c5.c5 { + background-color: transparent; +} + +.c5.c5.c5:focus { + outline: none; + box-shadow: 0 0 0 2px hsla(218,89%,51%,0.09); +} + +.c11.c11.c11 { + background-color: hsla(216,15%,54%,0.09); +} + +.c11.c11.c11 tr:last-child th { + border-bottom: none; +} + +.c12.c12.c12 { + height: 100%; + background-color: hsla(0,0%,100%,1); + border-bottom-width: 1px; + border-top-width: 1px; + border-bottom-color: hsla(216,15%,54%,0.18); + border-top-color: hsla(216,15%,54%,0.18); + border-bottom-style: solid; + border-top-style: solid; +} + +.c12.c12.c12 > div { + background-color: hsla(216,15%,54%,0.09); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + height: 100%; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 12px; + padding-right: 12px; +} + +.c1.c1.c1 tr:first-child th { + border-top: none; +} + +.c2.c2.c2 { + background-color: hsla(0,0%,100%,1); + height: 100%; + border-bottom-width: 1px; + border-top-width: 1px; + border-bottom-color: hsla(216,15%,54%,0.18); + border-top-color: hsla(216,15%,54%,0.18); + border-bottom-style: solid; + border-top-style: solid; + cursor: auto; +} + +.c2.c2.c2 > div { + background-color: hsla(216,15%,54%,0.09); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 100%; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 12px; + padding-right: 12px; +} + +.c2.c2.c2:focus-visible { + box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset; + outline: none; +} + +@media screen and (min-width:320px) { + .c8 { + pointer-events: auto; + } +} + +@media screen and (min-width:480px) { + .c8 { + pointer-events: auto; + } +} + +@media screen and (min-width:768px) { + .c8 { + pointer-events: auto; + } +} + +@media screen and (min-width:1024px) { + .c8 { + pointer-events: auto; + } +} + +@media screen and (min-width:1200px) { + .c8 { + pointer-events: auto; + } +} + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

+ Payment ID +

+
+ 		+
+

+ Amount +

+
+ 		+
+

+ Status +

+
+ 		+
+

+ Type +

+
+ 		+
+

+ Method +

+
+ 		+
+

+ Name +

+
+
+
+
+
+

+ rzp01 +

+
+
+
+ 		+
+
+
+ 100 +
+
+
+ 		+
+
+
+

+ pending +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ Netbanking +

+
+
+
+ 		+
+
+
+

+ John Doe +

+
+
+
+
+
+
+
+

+ rzp02 +

+
+
+
+ 		+
+
+
+ 240 +
+
+
+ 		+
+
+
+

+ pending +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ UPI +

+
+
+
+ 		+
+
+
+

+ Jane Doe +

+
+
+
+
+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+
+ + +`; + +exports[` should render table with isLoading 1`] = ` +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c2 { + padding: 1px; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-animation: eoUyJr 900ms cubic-bezier(0.5,0,0.3,1.5) infinite; + animation: eoUyJr 900ms cubic-bezier(0.5,0,0.3,1.5) infinite; +} + +
+
+
+
+
+ +
+
+
+
+
+`; + +exports[`
should render table with isRefreshing 1`] = ` +.c0 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + position: relative; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + position: absolute; + z-index: 3; + height: 100%; + width: 100%; + background-color: hsla(214,15%,18%,0.64); +} + +.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c11 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 100%; +} + +.c12 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + pointer-events: auto; +} + +.c4 { + padding: 1px; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-animation: eoUyJr 900ms cubic-bezier(0.5,0,0.3,1.5) infinite; + animation: eoUyJr 900ms cubic-bezier(0.5,0,0.3,1.5) infinite; +} + +.c7 { + color: hsla(217,56%,17%,1); + font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 0.875rem; + font-weight: 700; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + margin: 0; + padding: 0; +} + +.c14 { + color: hsla(217,56%,17%,1); + font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + margin: 0; + padding: 0; +} + +.c2 { + opacity: 1; + -webkit-transition: opacity 200ms; + transition: opacity 200ms; +} + +.c8.c8.c8 { + border: none; + -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); +} + +.c8.c8.c8 tr:last-child .cell-wrapper { + border-bottom: none; +} + +.c8.c8.c8 .row-select-single-selected .cell-wrapper-base, +.c8.c8.c8 .row-select-selected .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.09); +} + +.c8.c8.c8 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, +.c8.c8.c8 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.18); +} + +.c8.c8.c8 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, +.c8.c8.c8 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.09); +} + +.c8.c8.c8 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, +.c8.c8.c8 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.18); +} + +.c10.c10.c10 { + height: 100%; + background-color: hsla(0,0%,100%,1); +} + +.c10.c10.c10 > div:first-child { + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; +} + +.c10.c10.c10:focus-visible { + outline: none; + box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset; +} + +.c13.c13.c13 { + -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); + background-color: transparent; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 12px; + padding-right: 12px; + height: 100%; + border-bottom-width: 1px; + border-bottom-color: hsla(216,15%,54%,0.18); + border-bottom-style: solid; +} + +.c9.c9.c9 { + background-color: transparent; +} + +.c9.c9.c9:focus { + outline: none; + box-shadow: 0 0 0 2px hsla(218,89%,51%,0.09); +} + +.c15.c15.c15 { + background-color: hsla(216,15%,54%,0.09); +} + +.c15.c15.c15 tr:last-child th { + border-bottom: none; +} + +.c16.c16.c16 { + height: 100%; + background-color: hsla(0,0%,100%,1); + border-bottom-width: 1px; + border-top-width: 1px; + border-bottom-color: hsla(216,15%,54%,0.18); + border-top-color: hsla(216,15%,54%,0.18); + border-bottom-style: solid; + border-top-style: solid; +} + +.c16.c16.c16 > div { + background-color: hsla(216,15%,54%,0.09); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + height: 100%; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 12px; + padding-right: 12px; +} + +.c5.c5.c5 tr:first-child th { + border-top: none; +} + +.c6.c6.c6 { + background-color: hsla(0,0%,100%,1); + height: 100%; + border-bottom-width: 1px; + border-top-width: 1px; + border-bottom-color: hsla(216,15%,54%,0.18); + border-top-color: hsla(216,15%,54%,0.18); + border-bottom-style: solid; + border-top-style: solid; + cursor: auto; +} + +.c6.c6.c6 > div { + background-color: hsla(216,15%,54%,0.09); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 100%; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 12px; + padding-right: 12px; +} + +.c6.c6.c6:focus-visible { + box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset; + outline: none; +} + +@media screen and (min-width:320px) { + .c12 { + pointer-events: auto; + } +} + +@media screen and (min-width:480px) { + .c12 { + pointer-events: auto; + } +} + +@media screen and (min-width:768px) { + .c12 { + pointer-events: auto; + } +} + +@media screen and (min-width:1024px) { + .c12 { + pointer-events: auto; + } +} + +@media screen and (min-width:1200px) { + .c12 { + pointer-events: auto; + } +} + +
+
+
+
+
+
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

+ Payment ID +

+
+ 		+
+

+ Amount +

+
+ 		+
+

+ Status +

+
+ 		+
+

+ Type +

+
+ 		+
+

+ Method +

+
+ 		+
+

+ Name +

+
+
+
+
+
+

+ rzp01 +

+
+
+
+ 		+
+
+
+ 100 +
+
+
+ 		+
+
+
+

+ pending +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ Netbanking +

+
+
+
+ 		+
+
+
+

+ John Doe +

+
+
+
+
+
+
+
+

+ rzp02 +

+
+
+
+ 		+
+
+
+ 240 +
+
+
+ 		+
+
+
+

+ pending +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ UPI +

+
+
+
+ 		+
+
+
+

+ Jane Doe +

+
+
+
+
+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+
+ + +`; + +exports[` should render table with showStripedRows 1`] = ` +.c0 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + position: relative; +} + +.c7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 100%; +} + +.c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + pointer-events: auto; +} + +.c3 { + color: hsla(217,56%,17%,1); + font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 0.875rem; + font-weight: 700; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + margin: 0; + padding: 0; +} + +.c10 { + color: hsla(217,56%,17%,1); + font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + margin: 0; + padding: 0; +} + +.c4.c4.c4 { + border: none; + -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); +} + +.c4.c4.c4 tr:last-child .cell-wrapper { + border-bottom: none; +} + +.c4.c4.c4 .row-select-single-selected .cell-wrapper-base, +.c4.c4.c4 .row-select-selected .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.09); +} + +.c4.c4.c4 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, +.c4.c4.c4 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.18); +} + +.c4.c4.c4 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, +.c4.c4.c4 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.09); +} + +.c4.c4.c4 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, +.c4.c4.c4 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.18); +} + +.c4.c4.c4 tr:nth-child(even) .cell-wrapper { + background-color: hsla(216,15%,54%,0.09); +} + +.c4.c4.c4 tr:nth-child(even) .cell-wrapper-base { + background-color: transparent; +} + +.c6.c6.c6 { + height: 100%; + background-color: hsla(0,0%,100%,1); +} + +.c6.c6.c6 > div:first-child { + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; +} + +.c6.c6.c6:focus-visible { + outline: none; + box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset; +} + +.c9.c9.c9 { + -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); + background-color: transparent; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 12px; + padding-right: 12px; + height: 100%; +} + +.c5.c5.c5 { + background-color: transparent; +} + +.c5.c5.c5:focus { + outline: none; + box-shadow: 0 0 0 2px hsla(218,89%,51%,0.09); +} + +.c11.c11.c11 { + background-color: hsla(216,15%,54%,0.09); +} + +.c11.c11.c11 tr:last-child th { + border-bottom: none; +} + +.c12.c12.c12 { + height: 100%; + background-color: hsla(0,0%,100%,1); + border-bottom-width: 1px; + border-top-width: 1px; + border-bottom-color: hsla(216,15%,54%,0.18); + border-top-color: hsla(216,15%,54%,0.18); + border-bottom-style: solid; + border-top-style: solid; +} + +.c12.c12.c12 > div { + background-color: hsla(216,15%,54%,0.09); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + height: 100%; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 12px; + padding-right: 12px; +} + +.c1.c1.c1 tr:first-child th { + border-top: none; +} + +.c2.c2.c2 { + background-color: hsla(0,0%,100%,1); + height: 100%; + border-bottom-width: 1px; + border-top-width: 1px; + border-bottom-color: hsla(216,15%,54%,0.18); + border-top-color: hsla(216,15%,54%,0.18); + border-bottom-style: solid; + border-top-style: solid; + cursor: auto; +} + +.c2.c2.c2 > div { + background-color: hsla(216,15%,54%,0.09); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 100%; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 12px; + padding-right: 12px; +} + +.c2.c2.c2:focus-visible { + box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset; + outline: none; +} + +@media screen and (min-width:320px) { + .c8 { + pointer-events: auto; + } +} + +@media screen and (min-width:480px) { + .c8 { + pointer-events: auto; + } +} + +@media screen and (min-width:768px) { + .c8 { + pointer-events: auto; + } +} + +@media screen and (min-width:1024px) { + .c8 { + pointer-events: auto; + } +} + +@media screen and (min-width:1200px) { + .c8 { + pointer-events: auto; + } +} + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

+ Payment ID +

+
+ 		+
+

+ Amount +

+
+ 		+
+

+ Status +

+
+ 		+
+

+ Type +

+
+ 		+
+

+ Method +

+
+ 		+
+

+ Name +

+
+
+
+
+
+

+ rzp01 +

+
+
+
+ 		+
+
+
+ 100 +
+
+
+ 		+
+
+
+

+ pending +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ Netbanking +

+
+
+
+ 		+
+
+
+

+ John Doe +

+
+
+
+
+
+
+
+

+ rzp02 +

+
+
+
+ 		+
+
+
+ 240 +
+
+
+ 		+
+
+
+

+ pending +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ UPI +

+
+
+
+ 		+
+
+
+

+ Jane Doe +

+
+
+
+
+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+
+ + +`; + +exports[` should render table with sticky header, footer & first column 1`] = ` +.c0 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + position: relative; +} + +.c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 100%; +} + +.c9 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + pointer-events: auto; +} + +.c4 { + color: hsla(217,56%,17%,1); + font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 0.875rem; + font-weight: 700; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + margin: 0; + padding: 0; +} + +.c11 { + color: hsla(217,56%,17%,1); + font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + margin: 0; + padding: 0; +} + +.c1.c1.c1 { + height: 300px; +} + +.c5.c5.c5 { + border: none; + -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); +} + +.c5.c5.c5 tr:last-child .cell-wrapper { + border-bottom: none; +} + +.c5.c5.c5 .row-select-single-selected .cell-wrapper-base, +.c5.c5.c5 .row-select-selected .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.09); +} + +.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, +.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.18); +} + +.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, +.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.09); +} + +.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, +.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.18); +} + +.c7.c7.c7 { + height: 100%; + background-color: hsla(0,0%,100%,1); +} + +.c7.c7.c7 > div:first-child { + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; +} + +.c7.c7.c7:focus-visible { + outline: none; + box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset; +} + +.c10.c10.c10 { + -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); + background-color: transparent; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 12px; + padding-right: 12px; + height: 100%; + border-bottom-width: 1px; + border-bottom-color: hsla(216,15%,54%,0.18); + border-bottom-style: solid; +} + +.c6.c6.c6 { + background-color: transparent; +} + +.c6.c6.c6:focus { + outline: none; + box-shadow: 0 0 0 2px hsla(218,89%,51%,0.09); +} + +.c12.c12.c12 { + background-color: hsla(216,15%,54%,0.09); +} + +.c12.c12.c12 tr:last-child th { + border-bottom: none; +} + +.c13.c13.c13 { + height: 100%; + background-color: hsla(0,0%,100%,1); + border-bottom-width: 1px; + border-top-width: 1px; + border-bottom-color: hsla(216,15%,54%,0.18); + border-top-color: hsla(216,15%,54%,0.18); + border-bottom-style: solid; + border-top-style: solid; +} + +.c13.c13.c13 > div { + background-color: hsla(216,15%,54%,0.09); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + height: 100%; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 12px; + padding-right: 12px; +} + +.c2.c2.c2 tr:first-child th { + border-top: none; +} + +.c3.c3.c3 { + background-color: hsla(0,0%,100%,1); + height: 100%; + border-bottom-width: 1px; + border-top-width: 1px; + border-bottom-color: hsla(216,15%,54%,0.18); + border-top-color: hsla(216,15%,54%,0.18); + border-bottom-style: solid; + border-top-style: solid; + cursor: auto; +} + +.c3.c3.c3 > div { + background-color: hsla(216,15%,54%,0.09); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 100%; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 12px; + padding-right: 12px; +} + +.c3.c3.c3:focus-visible { + box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset; + outline: none; +} + +@media screen and (min-width:320px) { + .c9 { + pointer-events: auto; + } +} + +@media screen and (min-width:480px) { + .c9 { + pointer-events: auto; + } +} + +@media screen and (min-width:768px) { + .c9 { + pointer-events: auto; + } +} + +@media screen and (min-width:1024px) { + .c9 { + pointer-events: auto; + } +} + +@media screen and (min-width:1200px) { + .c9 { + pointer-events: auto; + } +} + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

+ Payment ID +

+
+ 		+
+

+ Amount +

+
+ 		+
+

+ Status +

+
+ 		+
+

+ Type +

+
+ 		+
+

+ Method +

+
+ 		+
+

+ Name +

+
+
+
+
+
+

+ rzp01 +

+
+
+
+ 		+
+
+
+ 100 +
+
+
+ 		+
+
+
+

+ pending +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ Netbanking +

+
+
+
+ 		+
+
+
+

+ John Doe +

+
+
+
+
+
+
+
+

+ rzp02 +

+
+
+
+ 		+
+
+
+ 240 +
+
+
+ 		+
+
+
+

+ pending +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ UPI +

+
+
+
+ 		+
+
+
+

+ Jane Doe +

+
+
+
+
+
+
+
+

+ rzp03 +

+
+
+
+ 		+
+
+
+ 120 +
+
+
+ 		+
+
+
+

+ failed +

+
+
+
+ 		+
+
+
+

+ debit +

+
+
+
+ 		+
+
+
+

+ Debit Card +

+
+
+
+ 		+
+
+
+

+ Alice Smith +

+
+
+
+
+
+
+
+

+ rzp04 +

+
+
+
+ 		+
+
+
+ 300 +
+
+
+ 		+
+
+
+

+ completed +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ Credit Card +

+
+
+
+ 		+
+
+
+

+ Bob Smith +

+
+
+
+
+
+
+
+

+ rzp05 +

+
+
+
+ 		+
+
+
+ 200 +
+
+
+ 		+
+
+
+

+ completed +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ Netbanking +

+
+
+
+ 		+
+
+
+

+ John Doe +

+
+
+
+
+
+
+
+

+ rzp06 +

+
+
+
+ 		+
+
+
+ 240 +
+
+
+ 		+
+
+
+

+ pending +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ UPI +

+
+
+
+ 		+
+
+
+

+ Jane Doe +

+
+
+
+
+
+
+
+

+ rzp07 +

+
+
+
+ 		+
+
+
+ 120 +
+
+
+ 		+
+
+
+

+ failed +

+
+
+
+ 		+
+
+
+

+ debit +

+
+
+
+ 		+
+
+
+

+ Debit Card +

+
+
+
+ 		+
+
+
+

+ Alice Smith +

+
+
+
+
+
+
+
+

+ rzp08 +

+
+
+
+ 		+
+
+
+ 300 +
+
+
+ 		+
+
+
+

+ completed +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ Credit Card +

+
+
+
+ 		+
+
+
+

+ Bob Smith +

+
+
+
+
+
+
+
+

+ rzp09 +

+
+
+
+ 		+
+
+
+ 200 +
+
+
+ 		+
+
+
+

+ completed +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ Netbanking +

+
+
+
+ 		+
+
+
+

+ John Doe +

+
+
+
+
+
+
+
+

+ rzp10 +

+
+
+
+ 		+
+
+
+ 240 +
+
+
+ 		+
+
+
+

+ pending +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ UPI +

+
+
+
+ 		+
+
+
+

+ Jane Doe +

+
+
+
+
+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+
+ + +`; + +exports[` should render table with surfaceLevel 1`] = ` +.c0 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + position: relative; +} + +.c7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 100%; +} + +.c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + pointer-events: auto; +} + +.c3 { + color: hsla(217,56%,17%,1); + font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 0.875rem; + font-weight: 700; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + margin: 0; + padding: 0; +} + +.c10 { + color: hsla(217,56%,17%,1); + font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + margin: 0; + padding: 0; +} + +.c4.c4.c4 { + border: none; + -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); +} + +.c4.c4.c4 tr:last-child .cell-wrapper { + border-bottom: none; +} + +.c4.c4.c4 .row-select-single-selected .cell-wrapper-base, +.c4.c4.c4 .row-select-selected .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.09); +} + +.c4.c4.c4 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, +.c4.c4.c4 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.18); +} + +.c4.c4.c4 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, +.c4.c4.c4 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.09); +} + +.c4.c4.c4 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, +.c4.c4.c4 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base { + background-color: hsla(218,89%,51%,0.18); +} + +.c6.c6.c6 { + height: 100%; + background-color: hsla(220,27%,98%,1); +} + +.c6.c6.c6 > div:first-child { + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; +} + +.c6.c6.c6:focus-visible { + outline: none; + box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset; +} + +.c9.c9.c9 { + -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); + transition: background-color 150ms cubic-bezier(0.3,0,0.2,1); + background-color: transparent; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 12px; + padding-right: 12px; + height: 100%; + border-bottom-width: 1px; + border-bottom-color: hsla(216,15%,54%,0.18); + border-bottom-style: solid; +} + +.c5.c5.c5 { + background-color: transparent; +} + +.c5.c5.c5:focus { + outline: none; + box-shadow: 0 0 0 2px hsla(218,89%,51%,0.09); +} + +.c11.c11.c11 { + background-color: hsla(216,15%,54%,0.09); +} + +.c11.c11.c11 tr:last-child th { + border-bottom: none; +} + +.c12.c12.c12 { + height: 100%; + background-color: hsla(220,27%,98%,1); + border-bottom-width: 1px; + border-top-width: 1px; + border-bottom-color: hsla(216,15%,54%,0.18); + border-top-color: hsla(216,15%,54%,0.18); + border-bottom-style: solid; + border-top-style: solid; +} + +.c12.c12.c12 > div { + background-color: hsla(216,15%,54%,0.09); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + height: 100%; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 12px; + padding-right: 12px; +} + +.c1.c1.c1 tr:first-child th { + border-top: none; +} + +.c2.c2.c2 { + background-color: hsla(220,27%,98%,1); + height: 100%; + border-bottom-width: 1px; + border-top-width: 1px; + border-bottom-color: hsla(216,15%,54%,0.18); + border-top-color: hsla(216,15%,54%,0.18); + border-bottom-style: solid; + border-top-style: solid; + cursor: auto; +} + +.c2.c2.c2 > div { + background-color: hsla(216,15%,54%,0.09); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 100%; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 12px; + padding-right: 12px; +} + +.c2.c2.c2:focus-visible { + box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset; + outline: none; +} + +@media screen and (min-width:320px) { + .c8 { + pointer-events: auto; + } +} + +@media screen and (min-width:480px) { + .c8 { + pointer-events: auto; + } +} + +@media screen and (min-width:768px) { + .c8 { + pointer-events: auto; + } +} + +@media screen and (min-width:1024px) { + .c8 { + pointer-events: auto; + } +} + +@media screen and (min-width:1200px) { + .c8 { + pointer-events: auto; + } +} + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

+ Payment ID +

+
+ 		+
+

+ Amount +

+
+ 		+
+

+ Status +

+
+ 		+
+

+ Type +

+
+ 		+
+

+ Method +

+
+ 		+
+

+ Name +

+
+
+
+
+
+

+ rzp01 +

+
+
+
+ 		+
+
+
+ 100 +
+
+
+ 		+
+
+
+

+ pending +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ Netbanking +

+
+
+
+ 		+
+
+
+

+ John Doe +

+
+
+
+
+
+
+
+

+ rzp02 +

+
+
+
+ 		+
+
+
+ 240 +
+
+
+ 		+
+
+
+

+ pending +

+
+
+
+ 		+
+
+
+

+ credit +

+
+
+
+ 		+
+
+
+

+ UPI +

+
+
+
+ 		+
+
+
+

+ Jane Doe +

+
+
+
+
+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+ 		+
+

+ - +

+
+
+ + +`;