mirror of
https://github.com/apache/superset.git
synced 2024-09-06 22:07:34 -04:00
feat: Uses new table component in Drill to Detail (#22173)
This commit is contained in:
parent
e80e10ec06
commit
3ffe7828a7
@ -157,62 +157,47 @@ describe('Drill to detail modal', () => {
|
|||||||
it('refreshes the data', () => {
|
it('refreshes the data', () => {
|
||||||
openModalFromMenu('big_number_total');
|
openModalFromMenu('big_number_total');
|
||||||
// move to the last page
|
// move to the last page
|
||||||
cy.get(".pagination-container [role='navigation'] [role='button']")
|
cy.get('.ant-pagination-item').eq(5).click();
|
||||||
.eq(7)
|
// skips error on pagination
|
||||||
.click();
|
cy.on('uncaught:exception', () => false);
|
||||||
cy.wait('@samples');
|
cy.wait('@samples');
|
||||||
// reload
|
// reload
|
||||||
cy.get("[aria-label='reload']").click();
|
cy.get("[aria-label='reload']").click();
|
||||||
cy.wait('@samples');
|
cy.wait('@samples');
|
||||||
// make sure it started back from first page
|
// make sure it started back from first page
|
||||||
cy.get(".pagination-container [role='navigation'] li.active").should(
|
cy.get('.ant-pagination-item-active').should('contain', '1');
|
||||||
'contain',
|
|
||||||
'1',
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('paginates', () => {
|
it('paginates', () => {
|
||||||
openModalFromMenu('big_number_total');
|
openModalFromMenu('big_number_total');
|
||||||
// checking the data
|
// checking the data
|
||||||
cy.getBySel('row-count-label').should('contain', '75.7k rows');
|
cy.getBySel('row-count-label').should('contain', '75.7k rows');
|
||||||
cy.get(".ant-modal-body [role='rowgroup'] [role='row']")
|
cy.get('.virtual-table-cell').then($rows => {
|
||||||
.should('have.length', 50)
|
|
||||||
.then($rows => {
|
|
||||||
expect($rows).to.contain('Amy');
|
expect($rows).to.contain('Amy');
|
||||||
});
|
});
|
||||||
// checking the paginated data
|
// checking the paginated data
|
||||||
cy.get(".pagination-container [role='navigation'] [role='button']")
|
cy.get('.ant-pagination-item')
|
||||||
.should('have.length', 9)
|
.should('have.length', 6)
|
||||||
.then($pages => {
|
.then($pages => {
|
||||||
expect($pages).to.contain('1');
|
expect($pages).to.contain('1');
|
||||||
expect($pages).to.contain('1514');
|
expect($pages).to.contain('1514');
|
||||||
});
|
});
|
||||||
cy.get(".pagination-container [role='navigation'] [role='button']")
|
cy.get('.ant-pagination-item').eq(4).click();
|
||||||
.eq(7)
|
// skips error on pagination
|
||||||
.click();
|
cy.on('uncaught:exception', () => false);
|
||||||
cy.wait('@samples');
|
cy.wait('@samples');
|
||||||
cy.get("[role='rowgroup'] [role='row']")
|
cy.get('.virtual-table-cell').then($rows => {
|
||||||
.should('have.length', 43)
|
expect($rows).to.contain('Kelly');
|
||||||
.then($rows => {
|
|
||||||
expect($rows).to.contain('Victoria');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// verify scroll top on pagination
|
// verify scroll top on pagination
|
||||||
cy.getBySelLike('Number-modal')
|
cy.getBySelLike('Number-modal').find('.virtual-grid').scrollTo(0, 200);
|
||||||
.find('.table-condensed')
|
|
||||||
.scrollTo(0, 100);
|
|
||||||
|
|
||||||
cy.get("[role='rowgroup'] [role='row']")
|
cy.get('.virtual-grid').contains('Juan').should('not.be.visible');
|
||||||
.contains('Miguel')
|
|
||||||
.should('not.be.visible');
|
|
||||||
|
|
||||||
cy.get(".pagination-container [role='navigation'] [role='button']")
|
cy.get('.ant-pagination-item').eq(0).click();
|
||||||
.eq(1)
|
|
||||||
.click();
|
|
||||||
|
|
||||||
cy.get("[role='rowgroup'] [role='row']")
|
cy.get('.virtual-grid').contains('Aaron').should('be.visible');
|
||||||
.contains('Aaron')
|
|
||||||
.should('be.visible');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -478,8 +463,8 @@ describe('Drill to detail modal', () => {
|
|||||||
// checking the filter
|
// checking the filter
|
||||||
cy.getBySel('filter-val').should('contain', 'boy');
|
cy.getBySel('filter-val').should('contain', 'boy');
|
||||||
cy.getBySel('row-count-label').should('contain', '39.2k rows');
|
cy.getBySel('row-count-label').should('contain', '39.2k rows');
|
||||||
cy.get(".pagination-container [role='navigation'] [role='button']")
|
cy.get('.ant-pagination-item')
|
||||||
.should('have.length', 9)
|
.should('have.length', 6)
|
||||||
.then($pages => {
|
.then($pages => {
|
||||||
expect($pages).to.contain('1');
|
expect($pages).to.contain('1');
|
||||||
expect($pages).to.contain('785');
|
expect($pages).to.contain('785');
|
||||||
@ -489,12 +474,9 @@ describe('Drill to detail modal', () => {
|
|||||||
cy.getBySel('filter-col').find("[aria-label='close']").click();
|
cy.getBySel('filter-col').find("[aria-label='close']").click();
|
||||||
cy.wait('@samples');
|
cy.wait('@samples');
|
||||||
cy.getBySel('row-count-label').should('contain', '75.7k rows');
|
cy.getBySel('row-count-label').should('contain', '75.7k rows');
|
||||||
cy.get(".pagination-container [role='navigation'] li.active").should(
|
cy.get('.ant-pagination-item-active').should('contain', '1');
|
||||||
'contain',
|
cy.get('.ant-pagination-item')
|
||||||
'1',
|
.should('have.length', 6)
|
||||||
);
|
|
||||||
cy.get(".pagination-container [role='navigation'] [role='button']")
|
|
||||||
.should('have.length', 9)
|
|
||||||
.then($pages => {
|
.then($pages => {
|
||||||
expect($pages).to.contain('1');
|
expect($pages).to.contain('1');
|
||||||
expect($pages).to.contain('1514');
|
expect($pages).to.contain('1514');
|
||||||
|
@ -110,6 +110,7 @@ export default function DrillDetailModal({
|
|||||||
}}
|
}}
|
||||||
draggable
|
draggable
|
||||||
destroyOnClose
|
destroyOnClose
|
||||||
|
maskClosable={false}
|
||||||
>
|
>
|
||||||
<DrillDetailPane formData={formData} initialFilters={initialFilters} />
|
<DrillDetailPane formData={formData} initialFilters={initialFilters} />
|
||||||
</Modal>
|
</Modal>
|
||||||
|
@ -134,7 +134,12 @@ test('should render the table with results', async () => {
|
|||||||
fetchWithData();
|
fetchWithData();
|
||||||
await waitForRender();
|
await waitForRender();
|
||||||
expect(screen.getByRole('table')).toBeInTheDocument();
|
expect(screen.getByRole('table')).toBeInTheDocument();
|
||||||
expect(screen.getAllByRole('row')).toHaveLength(4);
|
expect(screen.getByText('1996')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('11.27')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('1989')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('23.2')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('1999')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('9')).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole('columnheader', { name: 'year' }),
|
screen.getByRole('columnheader', { name: 'year' }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
@ -22,6 +22,7 @@ import React, {
|
|||||||
useMemo,
|
useMemo,
|
||||||
useCallback,
|
useCallback,
|
||||||
useRef,
|
useRef,
|
||||||
|
ReactElement,
|
||||||
} from 'react';
|
} from 'react';
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
import {
|
import {
|
||||||
@ -32,24 +33,54 @@ import {
|
|||||||
useTheme,
|
useTheme,
|
||||||
QueryFormData,
|
QueryFormData,
|
||||||
JsonObject,
|
JsonObject,
|
||||||
|
GenericDataType,
|
||||||
} from '@superset-ui/core';
|
} from '@superset-ui/core';
|
||||||
|
import { useResizeDetector } from 'react-resize-detector';
|
||||||
import Loading from 'src/components/Loading';
|
import Loading from 'src/components/Loading';
|
||||||
|
import BooleanCell from 'src/components/Table/cell-renderers/BooleanCell';
|
||||||
|
import NullCell from 'src/components/Table/cell-renderers/NullCell';
|
||||||
|
import TimeCell from 'src/components/Table/cell-renderers/TimeCell';
|
||||||
import { EmptyStateMedium } from 'src/components/EmptyState';
|
import { EmptyStateMedium } from 'src/components/EmptyState';
|
||||||
import TableView, { EmptyWrapperType } from 'src/components/TableView';
|
|
||||||
import { useTableColumns } from 'src/explore/components/DataTableControl';
|
|
||||||
import { getDatasourceSamples } from 'src/components/Chart/chartAction';
|
import { getDatasourceSamples } from 'src/components/Chart/chartAction';
|
||||||
|
import Table, {
|
||||||
|
ColumnsType,
|
||||||
|
TablePaginationConfig,
|
||||||
|
TableSize,
|
||||||
|
} from 'src/components/Table';
|
||||||
import MetadataBar, {
|
import MetadataBar, {
|
||||||
ContentType,
|
ContentType,
|
||||||
MetadataType,
|
MetadataType,
|
||||||
} from 'src/components/MetadataBar';
|
} from 'src/components/MetadataBar';
|
||||||
import Alert from 'src/components/Alert';
|
import Alert from 'src/components/Alert';
|
||||||
import { useApiV1Resource } from 'src/hooks/apiResources';
|
import { useApiV1Resource } from 'src/hooks/apiResources';
|
||||||
|
import HeaderWithRadioGroup from 'src/components/Table/header-renderers/HeaderWithRadioGroup';
|
||||||
import TableControls from './DrillDetailTableControls';
|
import TableControls from './DrillDetailTableControls';
|
||||||
import { getDrillPayload } from './utils';
|
import { getDrillPayload } from './utils';
|
||||||
import { Dataset, ResultsPage } from './types';
|
import { Dataset, ResultsPage } from './types';
|
||||||
|
|
||||||
const PAGE_SIZE = 50;
|
const PAGE_SIZE = 50;
|
||||||
|
|
||||||
|
interface DataType {
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Must be outside of the main component due to problems in
|
||||||
|
// react-resize-detector with conditional rendering
|
||||||
|
// https://github.com/maslianok/react-resize-detector/issues/178
|
||||||
|
function Resizable({ children }: { children: ReactElement }) {
|
||||||
|
const { ref, height } = useResizeDetector();
|
||||||
|
return (
|
||||||
|
<div ref={ref} css={{ flex: 1 }}>
|
||||||
|
{React.cloneElement(children, { height })}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
enum TimeFormatting {
|
||||||
|
Original,
|
||||||
|
Formatted,
|
||||||
|
}
|
||||||
|
|
||||||
export default function DrillDetailPane({
|
export default function DrillDetailPane({
|
||||||
formData,
|
formData,
|
||||||
initialFilters,
|
initialFilters,
|
||||||
@ -66,6 +97,7 @@ export default function DrillDetailPane({
|
|||||||
const [resultsPages, setResultsPages] = useState<Map<number, ResultsPage>>(
|
const [resultsPages, setResultsPages] = useState<Map<number, ResultsPage>>(
|
||||||
new Map(),
|
new Map(),
|
||||||
);
|
);
|
||||||
|
const [timeFormatting, setTimeFormatting] = useState({});
|
||||||
|
|
||||||
const SAMPLES_ROW_LIMIT = useSelector(
|
const SAMPLES_ROW_LIMIT = useSelector(
|
||||||
(state: { common: { conf: JsonObject } }) =>
|
(state: { common: { conf: JsonObject } }) =>
|
||||||
@ -89,29 +121,68 @@ export default function DrillDetailPane({
|
|||||||
return resultsPages.get(lastPageIndex.current);
|
return resultsPages.get(lastPageIndex.current);
|
||||||
}, [pageIndex, resultsPages]);
|
}, [pageIndex, resultsPages]);
|
||||||
|
|
||||||
// this is to preserve the order of the columns, even if there are integer values,
|
const mappedColumns: ColumnsType<DataType> = useMemo(
|
||||||
// while also only grabbing the first column's keys
|
|
||||||
const columns = useTableColumns(
|
|
||||||
resultsPage?.colNames,
|
|
||||||
resultsPage?.colTypes,
|
|
||||||
resultsPage?.data,
|
|
||||||
formData.datasource,
|
|
||||||
);
|
|
||||||
|
|
||||||
// Disable sorting on columns
|
|
||||||
const sortDisabledColumns = useMemo(
|
|
||||||
() =>
|
() =>
|
||||||
columns.map(column => ({
|
resultsPage?.colNames.map((column, index) => ({
|
||||||
...column,
|
key: column,
|
||||||
disableSortBy: true,
|
dataIndex: column,
|
||||||
})),
|
title:
|
||||||
[columns],
|
resultsPage?.colTypes[index] === GenericDataType.TEMPORAL ? (
|
||||||
|
<HeaderWithRadioGroup
|
||||||
|
headerTitle={column}
|
||||||
|
groupTitle={t('Formatting')}
|
||||||
|
groupOptions={[
|
||||||
|
{ label: t('Original value'), value: TimeFormatting.Original },
|
||||||
|
{
|
||||||
|
label: t('Formatted value'),
|
||||||
|
value: TimeFormatting.Formatted,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
value={
|
||||||
|
timeFormatting[column] === TimeFormatting.Original
|
||||||
|
? TimeFormatting.Original
|
||||||
|
: TimeFormatting.Formatted
|
||||||
|
}
|
||||||
|
onChange={value =>
|
||||||
|
setTimeFormatting(state => ({ ...state, [column]: value }))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
column
|
||||||
|
),
|
||||||
|
render: value => {
|
||||||
|
if (value === true || value === false) {
|
||||||
|
return <BooleanCell value={value} />;
|
||||||
|
}
|
||||||
|
if (value === null) {
|
||||||
|
return <NullCell />;
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
resultsPage?.colTypes[index] === GenericDataType.TEMPORAL &&
|
||||||
|
timeFormatting[column] !== TimeFormatting.Original &&
|
||||||
|
(typeof value === 'number' || value instanceof Date)
|
||||||
|
) {
|
||||||
|
return <TimeCell value={value} />;
|
||||||
|
}
|
||||||
|
return String(value);
|
||||||
|
},
|
||||||
|
width: 150,
|
||||||
|
})) || [],
|
||||||
|
[resultsPage?.colNames, resultsPage?.colTypes, timeFormatting],
|
||||||
);
|
);
|
||||||
|
|
||||||
// Update page index on pagination click
|
const data: DataType[] = useMemo(
|
||||||
const onServerPagination = useCallback(({ pageIndex }) => {
|
() =>
|
||||||
setPageIndex(pageIndex);
|
resultsPage?.data.map((row, index) =>
|
||||||
}, []);
|
resultsPage?.colNames.reduce(
|
||||||
|
(acc, curr) => ({ ...acc, [curr]: row[curr] }),
|
||||||
|
{
|
||||||
|
key: index,
|
||||||
|
},
|
||||||
|
),
|
||||||
|
) || [],
|
||||||
|
[resultsPage?.colNames, resultsPage?.data],
|
||||||
|
);
|
||||||
|
|
||||||
// Clear cache on reload button click
|
// Clear cache on reload button click
|
||||||
const handleReload = useCallback(() => {
|
const handleReload = useCallback(() => {
|
||||||
@ -222,29 +293,22 @@ export default function DrillDetailPane({
|
|||||||
} else {
|
} else {
|
||||||
// Render table if at least one page has successfully loaded
|
// Render table if at least one page has successfully loaded
|
||||||
tableContent = (
|
tableContent = (
|
||||||
<TableView
|
<Resizable>
|
||||||
columns={sortDisabledColumns}
|
<Table
|
||||||
data={resultsPage?.data || []}
|
data={data}
|
||||||
pageSize={PAGE_SIZE}
|
columns={mappedColumns}
|
||||||
totalCount={resultsPage?.total}
|
size={TableSize.SMALL}
|
||||||
serverPagination
|
defaultPageSize={PAGE_SIZE}
|
||||||
initialPageIndex={pageIndex}
|
recordCount={resultsPage?.total}
|
||||||
onServerPagination={onServerPagination}
|
usePagination
|
||||||
loading={isLoading}
|
loading={isLoading}
|
||||||
noDataText={t('No results')}
|
onChange={(pagination: TablePaginationConfig) =>
|
||||||
emptyWrapperType={EmptyWrapperType.Small}
|
setPageIndex(pagination.current ? pagination.current - 1 : 0)
|
||||||
className="table-condensed"
|
|
||||||
isPaginationSticky
|
|
||||||
showRowCount={false}
|
|
||||||
small
|
|
||||||
css={css`
|
|
||||||
overflow: auto;
|
|
||||||
.table {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
}
|
||||||
`}
|
resizable
|
||||||
scrollTopOnPagination
|
virtualize
|
||||||
/>
|
/>
|
||||||
|
</Resizable>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -82,6 +82,7 @@ export default function TableControls({
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: ${theme.gridUnit / 2}px 0;
|
padding: ${theme.gridUnit / 2}px 0;
|
||||||
|
margin-bottom: ${theme.gridUnit * 2}px;
|
||||||
`}
|
`}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
@ -36,6 +36,8 @@ import NumericCell, {
|
|||||||
LocaleCode,
|
LocaleCode,
|
||||||
Style,
|
Style,
|
||||||
} from './cell-renderers/NumericCell';
|
} from './cell-renderers/NumericCell';
|
||||||
|
import HeaderWithRadioGroup from './header-renderers/HeaderWithRadioGroup';
|
||||||
|
import TimeCell from './cell-renderers/TimeCell';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: 'Design System/Components/Table/Examples',
|
title: 'Design System/Components/Table/Examples',
|
||||||
@ -579,3 +581,102 @@ CellRenderers.args = {
|
|||||||
size: TableSize.SMALL,
|
size: TableSize.SMALL,
|
||||||
reorderable: true,
|
reorderable: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export interface ShoppingData {
|
||||||
|
key: number;
|
||||||
|
item: string;
|
||||||
|
orderDate: number;
|
||||||
|
price: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const shoppingData: ShoppingData[] = [
|
||||||
|
{
|
||||||
|
key: 1,
|
||||||
|
item: 'Floppy Disk 10 pack',
|
||||||
|
orderDate: Date.now(),
|
||||||
|
price: 9.99,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 2,
|
||||||
|
item: 'DVD 100 pack',
|
||||||
|
orderDate: Date.now(),
|
||||||
|
price: 7.99,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 3,
|
||||||
|
item: '128 GB SSD',
|
||||||
|
orderDate: Date.now(),
|
||||||
|
price: 3.99,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const HeaderRenderers: ComponentStory<typeof Table> = args => {
|
||||||
|
const [orderDateFormatting, setOrderDateFormatting] = useState('formatted');
|
||||||
|
const [priceLocale, setPriceLocale] = useState(LocaleCode.en_US);
|
||||||
|
const shoppingColumns: ColumnsType<ShoppingData> = [
|
||||||
|
{
|
||||||
|
title: 'Item',
|
||||||
|
dataIndex: 'item',
|
||||||
|
key: 'item',
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: () => (
|
||||||
|
<HeaderWithRadioGroup
|
||||||
|
headerTitle="Order date"
|
||||||
|
groupTitle="Formatting"
|
||||||
|
groupOptions={[
|
||||||
|
{ label: 'Original value', value: 'original' },
|
||||||
|
{ label: 'Formatted value', value: 'formatted' },
|
||||||
|
]}
|
||||||
|
value={orderDateFormatting}
|
||||||
|
onChange={value => setOrderDateFormatting(value)}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
dataIndex: 'orderDate',
|
||||||
|
key: 'orderDate',
|
||||||
|
width: 200,
|
||||||
|
render: value =>
|
||||||
|
orderDateFormatting === 'original' ? value : <TimeCell value={value} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: () => (
|
||||||
|
<HeaderWithRadioGroup
|
||||||
|
headerTitle="Price"
|
||||||
|
groupTitle="Currency"
|
||||||
|
groupOptions={[
|
||||||
|
{ label: 'US Dollar', value: LocaleCode.en_US },
|
||||||
|
{ label: 'Brazilian Real', value: LocaleCode.pt_BR },
|
||||||
|
]}
|
||||||
|
value={priceLocale}
|
||||||
|
onChange={value => setPriceLocale(value as LocaleCode)}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
dataIndex: 'price',
|
||||||
|
key: 'price',
|
||||||
|
width: 200,
|
||||||
|
render: value => (
|
||||||
|
<NumericCell
|
||||||
|
value={value}
|
||||||
|
options={{
|
||||||
|
style: Style.CURRENCY,
|
||||||
|
currency:
|
||||||
|
priceLocale === LocaleCode.en_US
|
||||||
|
? CurrencyCode.USD
|
||||||
|
: CurrencyCode.BRL,
|
||||||
|
}}
|
||||||
|
locale={priceLocale}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Table
|
||||||
|
data={shoppingData}
|
||||||
|
columns={shoppingColumns}
|
||||||
|
size={TableSize.SMALL}
|
||||||
|
resizable
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
@ -24,7 +24,7 @@ import { VariableSizeGrid as Grid } from 'react-window';
|
|||||||
import { StyledComponent } from '@emotion/styled';
|
import { StyledComponent } from '@emotion/styled';
|
||||||
import { useTheme, styled } from '@superset-ui/core';
|
import { useTheme, styled } from '@superset-ui/core';
|
||||||
import { TablePaginationConfig } from 'antd/lib/table';
|
import { TablePaginationConfig } from 'antd/lib/table';
|
||||||
import { TableProps, TableSize, HEIGHT_OFFSET, ETableAction } from './index';
|
import { TableProps, TableSize, ETableAction } from './index';
|
||||||
|
|
||||||
const StyledCell: StyledComponent<any> = styled('div')<any>(
|
const StyledCell: StyledComponent<any> = styled('div')<any>(
|
||||||
({ theme, height }) => `
|
({ theme, height }) => `
|
||||||
@ -176,7 +176,7 @@ const VirtualTable = (props: TableProps) => {
|
|||||||
const { width = DEFAULT_COL_WIDTH } = mergedColumns[index];
|
const { width = DEFAULT_COL_WIDTH } = mergedColumns[index];
|
||||||
return width as number;
|
return width as number;
|
||||||
}}
|
}}
|
||||||
height={height ? height - HEIGHT_OFFSET : (scroll!.y as number)}
|
height={height || (scroll!.y as number)}
|
||||||
rowCount={rawData.length}
|
rowCount={rawData.length}
|
||||||
rowHeight={() => cellSize}
|
rowHeight={() => cellSize}
|
||||||
width={tableWidth}
|
width={tableWidth}
|
||||||
|
@ -0,0 +1,34 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
import React from 'react';
|
||||||
|
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||||
|
import BooleanCell from '.';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Design System/Components/Table/Cell Renderers/BooleanCell',
|
||||||
|
component: BooleanCell,
|
||||||
|
} as ComponentMeta<typeof BooleanCell>;
|
||||||
|
|
||||||
|
export const Basic: ComponentStory<typeof BooleanCell> = args => (
|
||||||
|
<BooleanCell {...args} />
|
||||||
|
);
|
||||||
|
|
||||||
|
Basic.args = {
|
||||||
|
value: true,
|
||||||
|
};
|
@ -0,0 +1,37 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
import React from 'react';
|
||||||
|
import { render, screen } from 'spec/helpers/testing-library';
|
||||||
|
import { BOOL_FALSE_DISPLAY, BOOL_TRUE_DISPLAY } from 'src/constants';
|
||||||
|
import BooleanCell from '.';
|
||||||
|
|
||||||
|
test('renders true value', async () => {
|
||||||
|
render(<BooleanCell value />);
|
||||||
|
expect(screen.getByText(BOOL_TRUE_DISPLAY)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('renders false value', async () => {
|
||||||
|
render(<BooleanCell value={false} />);
|
||||||
|
expect(screen.getByText(BOOL_FALSE_DISPLAY)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('renders falsy value', async () => {
|
||||||
|
render(<BooleanCell />);
|
||||||
|
expect(screen.getByText(BOOL_FALSE_DISPLAY)).toBeInTheDocument();
|
||||||
|
});
|
@ -0,0 +1,30 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
import React from 'react';
|
||||||
|
import { BOOL_FALSE_DISPLAY, BOOL_TRUE_DISPLAY } from 'src/constants';
|
||||||
|
|
||||||
|
export interface BooleanCellProps {
|
||||||
|
value?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
function BooleanCell({ value }: BooleanCellProps) {
|
||||||
|
return <span>{value ? BOOL_TRUE_DISPLAY : BOOL_FALSE_DISPLAY}</span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BooleanCell;
|
@ -0,0 +1,28 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
import React from 'react';
|
||||||
|
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||||
|
import NullCell from '.';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Design System/Components/Table/Cell Renderers/NullCell',
|
||||||
|
component: NullCell,
|
||||||
|
} as ComponentMeta<typeof NullCell>;
|
||||||
|
|
||||||
|
export const Basic: ComponentStory<typeof NullCell> = () => <NullCell />;
|
@ -0,0 +1,35 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
import React from 'react';
|
||||||
|
import { render, screen } from 'spec/helpers/testing-library';
|
||||||
|
import { supersetTheme } from '@superset-ui/core';
|
||||||
|
import { NULL_DISPLAY } from 'src/constants';
|
||||||
|
import NullCell from '.';
|
||||||
|
|
||||||
|
test('renders null value', async () => {
|
||||||
|
render(<NullCell />);
|
||||||
|
expect(screen.getByText(NULL_DISPLAY)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('renders with gray font', async () => {
|
||||||
|
render(<NullCell />);
|
||||||
|
expect(screen.getByText(NULL_DISPLAY)).toHaveStyle(
|
||||||
|
`color: ${supersetTheme.colors.grayscale.light1}`,
|
||||||
|
);
|
||||||
|
});
|
@ -0,0 +1,37 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
import React from 'react';
|
||||||
|
import { css, SupersetTheme } from '@superset-ui/core';
|
||||||
|
import { NULL_DISPLAY } from 'src/constants';
|
||||||
|
|
||||||
|
function NullCell() {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
css={(theme: SupersetTheme) =>
|
||||||
|
css`
|
||||||
|
color: ${theme.colors.grayscale.light1};
|
||||||
|
`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{NULL_DISPLAY}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NullCell;
|
@ -0,0 +1,43 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
import React from 'react';
|
||||||
|
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||||
|
import { TimeFormats } from '@superset-ui/core';
|
||||||
|
import TimeCell from '.';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Design System/Components/Table/Cell Renderers/TimeCell',
|
||||||
|
component: TimeCell,
|
||||||
|
} as ComponentMeta<typeof TimeCell>;
|
||||||
|
|
||||||
|
export const Basic: ComponentStory<typeof TimeCell> = args => (
|
||||||
|
<TimeCell {...args} />
|
||||||
|
);
|
||||||
|
|
||||||
|
Basic.args = {
|
||||||
|
value: Date.now(),
|
||||||
|
};
|
||||||
|
|
||||||
|
Basic.argTypes = {
|
||||||
|
format: {
|
||||||
|
defaultValue: TimeFormats.DATABASE_DATETIME,
|
||||||
|
control: 'select',
|
||||||
|
options: Object.values(TimeFormats),
|
||||||
|
},
|
||||||
|
};
|
@ -0,0 +1,49 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
import { TimeFormats } from '@superset-ui/core';
|
||||||
|
import React from 'react';
|
||||||
|
import { render, screen } from 'spec/helpers/testing-library';
|
||||||
|
import TimeCell from '.';
|
||||||
|
|
||||||
|
const DATE = Date.parse('2022-01-01');
|
||||||
|
|
||||||
|
test('renders with default format', async () => {
|
||||||
|
render(<TimeCell value={DATE} />);
|
||||||
|
expect(screen.getByText('2022-01-01 00:00:00')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('renders with custom format', async () => {
|
||||||
|
render(<TimeCell value={DATE} format={TimeFormats.DATABASE_DATE} />);
|
||||||
|
expect(screen.getByText('2022-01-01')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('renders with number', async () => {
|
||||||
|
render(<TimeCell value={DATE.valueOf()} />);
|
||||||
|
expect(screen.getByText('2022-01-01 00:00:00')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('renders with no value', async () => {
|
||||||
|
render(<TimeCell />);
|
||||||
|
expect(screen.getByText('N/A')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('renders with invalid date format', async () => {
|
||||||
|
render(<TimeCell format="aaa-bbb-ccc" value={DATE} />);
|
||||||
|
expect(screen.getByText('aaa-bbb-ccc')).toBeInTheDocument();
|
||||||
|
});
|
@ -0,0 +1,38 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
import React from 'react';
|
||||||
|
import { getTimeFormatter, TimeFormats } from '@superset-ui/core';
|
||||||
|
import NullCell from '../NullCell';
|
||||||
|
|
||||||
|
export interface TimeCellProps {
|
||||||
|
format?: string;
|
||||||
|
value?: number | Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
function TimeCell({
|
||||||
|
format = TimeFormats.DATABASE_DATETIME,
|
||||||
|
value,
|
||||||
|
}: TimeCellProps) {
|
||||||
|
if (value) {
|
||||||
|
return <span>{getTimeFormatter(format).format(value)}</span>;
|
||||||
|
}
|
||||||
|
return <NullCell />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TimeCell;
|
@ -0,0 +1,94 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { css, useTheme } from '@superset-ui/core';
|
||||||
|
import { Radio } from 'src/components/Radio';
|
||||||
|
import { Space } from 'src/components';
|
||||||
|
import Icons from 'src/components/Icons';
|
||||||
|
import Popover from 'src/components/Popover';
|
||||||
|
|
||||||
|
export interface HeaderWithRadioGroupProps {
|
||||||
|
headerTitle: string;
|
||||||
|
groupTitle: string;
|
||||||
|
groupOptions: { label: string; value: string | number }[];
|
||||||
|
value?: string | number;
|
||||||
|
onChange: (value: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function HeaderWithRadioGroup(props: HeaderWithRadioGroupProps) {
|
||||||
|
const { headerTitle, groupTitle, groupOptions, value, onChange } = props;
|
||||||
|
const theme = useTheme();
|
||||||
|
const [popoverVisible, setPopoverVisible] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
css={css`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<Popover
|
||||||
|
trigger="click"
|
||||||
|
visible={popoverVisible}
|
||||||
|
content={
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
css={css`
|
||||||
|
font-weight: ${theme.typography.weights.bold};
|
||||||
|
margin-bottom: ${theme.gridUnit}px;
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{groupTitle}
|
||||||
|
</div>
|
||||||
|
<Radio.Group
|
||||||
|
value={value}
|
||||||
|
onChange={e => {
|
||||||
|
onChange(e.target.value);
|
||||||
|
setPopoverVisible(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Space direction="vertical">
|
||||||
|
{groupOptions.map(option => (
|
||||||
|
<Radio key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</Radio>
|
||||||
|
))}
|
||||||
|
</Space>
|
||||||
|
</Radio.Group>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
placement="bottomLeft"
|
||||||
|
arrowPointAtCenter
|
||||||
|
>
|
||||||
|
<Icons.SettingOutlined
|
||||||
|
iconSize="m"
|
||||||
|
iconColor={theme.colors.grayscale.light1}
|
||||||
|
css={css`
|
||||||
|
margin-top: 3px; // we need exactly 3px to align the icon
|
||||||
|
margin-right: ${theme.gridUnit}px;
|
||||||
|
`}
|
||||||
|
onClick={() => setPopoverVisible(true)}
|
||||||
|
/>
|
||||||
|
</Popover>
|
||||||
|
{headerTitle}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HeaderWithRadioGroup;
|
@ -200,14 +200,15 @@ export enum TableSize {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const defaultRowSelection: React.Key[] = [];
|
const defaultRowSelection: React.Key[] = [];
|
||||||
// This accounts for the tables header and pagination if user gives table instance a height. this is a temp solution
|
|
||||||
export const HEIGHT_OFFSET = 108;
|
const PAGINATION_HEIGHT = 40;
|
||||||
|
const HEADER_HEIGHT = 68;
|
||||||
|
|
||||||
const StyledTable: StyledComponent<any> = styled(AntTable)<any>(
|
const StyledTable: StyledComponent<any> = styled(AntTable)<any>(
|
||||||
({ theme, height }) => `
|
({ theme, height }) => `
|
||||||
.ant-table-body {
|
.ant-table-body {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
height: ${height ? `${height - HEIGHT_OFFSET}px` : undefined};
|
height: ${height ? `${height}px` : undefined};
|
||||||
}
|
}
|
||||||
|
|
||||||
th.ant-table-cell {
|
th.ant-table-cell {
|
||||||
@ -348,6 +349,8 @@ export function Table(props: TableProps) {
|
|||||||
setMergedLocale(updatedLocale);
|
setMergedLocale(updatedLocale);
|
||||||
}, [locale]);
|
}, [locale]);
|
||||||
|
|
||||||
|
useEffect(() => setDerivedColumns(columns), [columns]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (interactiveTableUtils.current) {
|
if (interactiveTableUtils.current) {
|
||||||
interactiveTableUtils.current?.clearListeners();
|
interactiveTableUtils.current?.clearListeners();
|
||||||
@ -403,6 +406,16 @@ export function Table(props: TableProps) {
|
|||||||
paginationSettings.total = recordCount;
|
paginationSettings.total = recordCount;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let bodyHeight = height;
|
||||||
|
if (bodyHeight) {
|
||||||
|
bodyHeight -= HEADER_HEIGHT;
|
||||||
|
const hasPagination =
|
||||||
|
usePagination && recordCount && recordCount > pageSize;
|
||||||
|
if (hasPagination) {
|
||||||
|
bodyHeight -= PAGINATION_HEIGHT;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const sharedProps = {
|
const sharedProps = {
|
||||||
loading: { spinning: loading ?? false, indicator: <Loading /> },
|
loading: { spinning: loading ?? false, indicator: <Loading /> },
|
||||||
hasData: hideData ? false : data,
|
hasData: hideData ? false : data,
|
||||||
@ -414,7 +427,7 @@ export function Table(props: TableProps) {
|
|||||||
showSorterTooltip: false,
|
showSorterTooltip: false,
|
||||||
onChange,
|
onChange,
|
||||||
theme,
|
theme,
|
||||||
height,
|
height: bodyHeight,
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
Loading…
Reference in New Issue
Block a user