= args => {
+ const [orderDateFormatting, setOrderDateFormatting] = useState('formatted');
+ const [priceLocale, setPriceLocale] = useState(LocaleCode.en_US);
+ const shoppingColumns: ColumnsType
= [
+ {
+ title: 'Item',
+ dataIndex: 'item',
+ key: 'item',
+ width: 200,
+ },
+ {
+ title: () => (
+ setOrderDateFormatting(value)}
+ />
+ ),
+ dataIndex: 'orderDate',
+ key: 'orderDate',
+ width: 200,
+ render: value =>
+ orderDateFormatting === 'original' ? value : ,
+ },
+ {
+ title: () => (
+ setPriceLocale(value as LocaleCode)}
+ />
+ ),
+ dataIndex: 'price',
+ key: 'price',
+ width: 200,
+ render: value => (
+
+ ),
+ },
+ ];
+
+ return (
+
+ );
+};
diff --git a/superset-frontend/src/components/Table/VirtualTable.tsx b/superset-frontend/src/components/Table/VirtualTable.tsx
index 713eca6b79a..fc7b7ee27d3 100644
--- a/superset-frontend/src/components/Table/VirtualTable.tsx
+++ b/superset-frontend/src/components/Table/VirtualTable.tsx
@@ -24,7 +24,7 @@ import { VariableSizeGrid as Grid } from 'react-window';
import { StyledComponent } from '@emotion/styled';
import { useTheme, styled } from '@superset-ui/core';
import { TablePaginationConfig } from 'antd/lib/table';
-import { TableProps, TableSize, HEIGHT_OFFSET, ETableAction } from './index';
+import { TableProps, TableSize, ETableAction } from './index';
const StyledCell: StyledComponent = styled('div')(
({ theme, height }) => `
@@ -176,7 +176,7 @@ const VirtualTable = (props: TableProps) => {
const { width = DEFAULT_COL_WIDTH } = mergedColumns[index];
return width as number;
}}
- height={height ? height - HEIGHT_OFFSET : (scroll!.y as number)}
+ height={height || (scroll!.y as number)}
rowCount={rawData.length}
rowHeight={() => cellSize}
width={tableWidth}
diff --git a/superset-frontend/src/components/Table/cell-renderers/BooleanCell/BooleanCell.stories.tsx b/superset-frontend/src/components/Table/cell-renderers/BooleanCell/BooleanCell.stories.tsx
new file mode 100644
index 00000000000..8a98f18299c
--- /dev/null
+++ b/superset-frontend/src/components/Table/cell-renderers/BooleanCell/BooleanCell.stories.tsx
@@ -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;
+
+export const Basic: ComponentStory = args => (
+
+);
+
+Basic.args = {
+ value: true,
+};
diff --git a/superset-frontend/src/components/Table/cell-renderers/BooleanCell/BooleanCell.test.tsx b/superset-frontend/src/components/Table/cell-renderers/BooleanCell/BooleanCell.test.tsx
new file mode 100644
index 00000000000..fa83db6271d
--- /dev/null
+++ b/superset-frontend/src/components/Table/cell-renderers/BooleanCell/BooleanCell.test.tsx
@@ -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();
+ expect(screen.getByText(BOOL_TRUE_DISPLAY)).toBeInTheDocument();
+});
+
+test('renders false value', async () => {
+ render();
+ expect(screen.getByText(BOOL_FALSE_DISPLAY)).toBeInTheDocument();
+});
+
+test('renders falsy value', async () => {
+ render();
+ expect(screen.getByText(BOOL_FALSE_DISPLAY)).toBeInTheDocument();
+});
diff --git a/superset-frontend/src/components/Table/cell-renderers/BooleanCell/index.tsx b/superset-frontend/src/components/Table/cell-renderers/BooleanCell/index.tsx
new file mode 100644
index 00000000000..2707d522417
--- /dev/null
+++ b/superset-frontend/src/components/Table/cell-renderers/BooleanCell/index.tsx
@@ -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 {value ? BOOL_TRUE_DISPLAY : BOOL_FALSE_DISPLAY};
+}
+
+export default BooleanCell;
diff --git a/superset-frontend/src/components/Table/cell-renderers/NullCell/NullCell.stories.tsx b/superset-frontend/src/components/Table/cell-renderers/NullCell/NullCell.stories.tsx
new file mode 100644
index 00000000000..ff39cd25528
--- /dev/null
+++ b/superset-frontend/src/components/Table/cell-renderers/NullCell/NullCell.stories.tsx
@@ -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;
+
+export const Basic: ComponentStory = () => ;
diff --git a/superset-frontend/src/components/Table/cell-renderers/NullCell/NullCell.test.tsx b/superset-frontend/src/components/Table/cell-renderers/NullCell/NullCell.test.tsx
new file mode 100644
index 00000000000..3a3fd9d416c
--- /dev/null
+++ b/superset-frontend/src/components/Table/cell-renderers/NullCell/NullCell.test.tsx
@@ -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();
+ expect(screen.getByText(NULL_DISPLAY)).toBeInTheDocument();
+});
+
+test('renders with gray font', async () => {
+ render();
+ expect(screen.getByText(NULL_DISPLAY)).toHaveStyle(
+ `color: ${supersetTheme.colors.grayscale.light1}`,
+ );
+});
diff --git a/superset-frontend/src/components/Table/cell-renderers/NullCell/index.tsx b/superset-frontend/src/components/Table/cell-renderers/NullCell/index.tsx
new file mode 100644
index 00000000000..f1c9139fd9f
--- /dev/null
+++ b/superset-frontend/src/components/Table/cell-renderers/NullCell/index.tsx
@@ -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 (
+
+ css`
+ color: ${theme.colors.grayscale.light1};
+ `
+ }
+ >
+ {NULL_DISPLAY}
+
+ );
+}
+
+export default NullCell;
diff --git a/superset-frontend/src/components/Table/cell-renderers/TimeCell/TimeCell.stories.tsx b/superset-frontend/src/components/Table/cell-renderers/TimeCell/TimeCell.stories.tsx
new file mode 100644
index 00000000000..f37c5b8c6af
--- /dev/null
+++ b/superset-frontend/src/components/Table/cell-renderers/TimeCell/TimeCell.stories.tsx
@@ -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;
+
+export const Basic: ComponentStory = args => (
+
+);
+
+Basic.args = {
+ value: Date.now(),
+};
+
+Basic.argTypes = {
+ format: {
+ defaultValue: TimeFormats.DATABASE_DATETIME,
+ control: 'select',
+ options: Object.values(TimeFormats),
+ },
+};
diff --git a/superset-frontend/src/components/Table/cell-renderers/TimeCell/TimeCell.test.tsx b/superset-frontend/src/components/Table/cell-renderers/TimeCell/TimeCell.test.tsx
new file mode 100644
index 00000000000..81ccbed38ac
--- /dev/null
+++ b/superset-frontend/src/components/Table/cell-renderers/TimeCell/TimeCell.test.tsx
@@ -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();
+ expect(screen.getByText('2022-01-01 00:00:00')).toBeInTheDocument();
+});
+
+test('renders with custom format', async () => {
+ render();
+ expect(screen.getByText('2022-01-01')).toBeInTheDocument();
+});
+
+test('renders with number', async () => {
+ render();
+ expect(screen.getByText('2022-01-01 00:00:00')).toBeInTheDocument();
+});
+
+test('renders with no value', async () => {
+ render();
+ expect(screen.getByText('N/A')).toBeInTheDocument();
+});
+
+test('renders with invalid date format', async () => {
+ render();
+ expect(screen.getByText('aaa-bbb-ccc')).toBeInTheDocument();
+});
diff --git a/superset-frontend/src/components/Table/cell-renderers/TimeCell/index.tsx b/superset-frontend/src/components/Table/cell-renderers/TimeCell/index.tsx
new file mode 100644
index 00000000000..31a9dac2472
--- /dev/null
+++ b/superset-frontend/src/components/Table/cell-renderers/TimeCell/index.tsx
@@ -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 {getTimeFormatter(format).format(value)};
+ }
+ return ;
+}
+
+export default TimeCell;
diff --git a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx
new file mode 100644
index 00000000000..65fd435119f
--- /dev/null
+++ b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx
@@ -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 (
+
+
+
+ {groupTitle}
+
+ {
+ onChange(e.target.value);
+ setPopoverVisible(false);
+ }}
+ >
+
+ {groupOptions.map(option => (
+
+ {option.label}
+
+ ))}
+
+
+