@patternfly/react-data-view 5.1.0 → 5.1.2

package/patternfly-docs/content/extensions/data-view/examples/Functionality/SelectionExample.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
 import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
 import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 
 interface Repository {
   name: string;
@@ -14,35 +14,31 @@ interface Repository {
 }
 
 const repositories: Repository[] = [
-  { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
-  { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
-  { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
-  { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
-  { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
-  { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
 ];
 
-const cols = {
-  name: 'Repositories',
-  branches: 'Branches',
-  prs: 'Pull requests',
-  workspaces: 'Workspaces',
-  lastCommit: 'Last commit'
-};
+const rows = repositories.map(item => Object.values(item));
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
 
 const ouiaId = 'LayoutExample';
 
 export const BasicExample: React.FunctionComponent = () => { 
-  const selection = useDataViewSelection({});
-  const { selected, onSelect, isSelected } = selection;
+  const selection = useDataViewSelection({ matchOption: (a, b) => a[0] === b[0] });
+  const { selected, onSelect } = selection;
 
   const handleBulkSelect = (value: BulkSelectValue) => {
     value === BulkSelectValue.none && onSelect(false);
-    value === BulkSelectValue.all && onSelect(true, repositories);
+    value === BulkSelectValue.all && onSelect(true, rows);
   };
 
   return (
-    <DataView>
+    <DataView selection={selection}>
       <DataViewToolbar 
         ouiaId='DataViewHeader'
         bulkSelect={
@@ -55,34 +51,7 @@ export const BasicExample: React.FunctionComponent = () => {
           />
         } 
       />
-      <Table aria-label="Repositories table" ouiaId={ouiaId}>
-        <Thead data-ouia-component-id={`${ouiaId}-thead`}>
-          <Tr ouiaId={`${ouiaId}-tr-head`}>
-            <Th key="row-select"/>
-            {Object.values(cols).map((column, index) => (
-              <Th key={index} data-ouia-component-id={`${ouiaId}-th-${index}`}>{column}</Th>
-            ))}
-          </Tr>
-        </Thead>
-        <Tbody>
-          {repositories.map((repo, rowIndex) => (
-            <Tr key={repo.name} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
-              <Td
-                key={`select-${rowIndex}`}
-                select={{
-                  rowIndex,
-                  onSelect: (_event, isSelecting) => onSelect(isSelecting, repo),
-                  isSelected: isSelected(repo),
-                  isDisabled: false
-                }}
-              />
-              {Object.keys(cols).map((column, colIndex) => (
-                <Td key={colIndex} data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}>{repo[column]}</Td>
-              ))}
-            </Tr>
-          ))}
-        </Tbody>
-      </Table>
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
     </DataView>
   );
 }

package/patternfly-docs/content/extensions/data-view/examples/Layout/Layout.md

@@ -19,6 +19,7 @@ import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-d
 import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
 import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
 import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import DataViewTable from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 
 The **data view** component renders record data in a configured layout.
 

package/patternfly-docs/content/extensions/data-view/examples/Layout/PredefinedLayoutExample.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
 import { Pagination } from '@patternfly/react-core';
-import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
 import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
 import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
 
 const perPageOptions = [
@@ -20,51 +20,47 @@ interface Repository {
 }
 
 const repositories: Repository[] = [
-  { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
-  { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
-  { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
-  { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
-  { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
-  { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
 ];
 
-const cols = {
-  name: 'Repositories',
-  branches: 'Branches',
-  prs: 'Pull requests',
-  workspaces: 'Workspaces',
-  lastCommit: 'Last commit'
-};
+const rows = repositories.map(item => Object.values(item));
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
 
 const ouiaId = 'LayoutExample';
 
 export const BasicExample: React.FunctionComponent = () => { 
   const pagination = useDataViewPagination({ perPage: 5 });
   const { page, perPage } = pagination;
-  const selection = useDataViewSelection({});
+  const selection = useDataViewSelection({ matchOption: (a, b) => a[0] === b[0] });
   const { selected, onSelect, isSelected } = selection;
 
-  const pageData = useMemo(() => repositories.slice((page - 1) * perPage, ((page - 1) * perPage) + perPage), [ page, perPage ]);
+  const pageRows = useMemo(() => rows.slice((page - 1) * perPage, ((page - 1) * perPage) + perPage), [ page, perPage ]);
 
   const handleBulkSelect = (value: BulkSelectValue) => {
     value === BulkSelectValue.none && onSelect(false);
-    value === BulkSelectValue.all && onSelect(true, repositories);
-    value === BulkSelectValue.nonePage && onSelect(false, pageData);
-    value === BulkSelectValue.page && onSelect(true, pageData);
+    value === BulkSelectValue.all && onSelect(true, rows);
+    value === BulkSelectValue.nonePage && onSelect(false, pageRows);
+    value === BulkSelectValue.page && onSelect(true, pageRows);
   };
 
   return (
-    <DataView>
+    <DataView selection={selection}>
       <DataViewToolbar 
         ouiaId='LayoutExampleHeader' 
         bulkSelect={
           <BulkSelect
             canSelectAll
-            pageCount={pageData.length}
+            pageCount={pageRows.length}
             totalCount={repositories.length}
             selectedCount={selected.length}
-            pageSelected={pageData.every(item => isSelected(item))}
-            pagePartiallySelected={pageData.some(item => isSelected(item)) && !pageData.every(item => isSelected(item))}
+            pageSelected={pageRows.every(item => isSelected(item))}
+            pagePartiallySelected={pageRows.some(item => isSelected(item)) && !pageRows.every(item => isSelected(item))}
             onSelect={handleBulkSelect}
           />
         } 
@@ -76,34 +72,7 @@ export const BasicExample: React.FunctionComponent = () => {
           />
         } 
       />
-      <Table aria-label="Repositories table" ouiaId={ouiaId}>
-        <Thead data-ouia-component-id={`${ouiaId}-thead`}>
-          <Tr ouiaId={`${ouiaId}-tr-head`}>
-            <Th key="row-select"/>
-            {Object.values(cols).map((column, index) => (
-              <Th key={index} data-ouia-component-id={`${ouiaId}-th-${index}`}>{column}</Th>
-            ))}
-          </Tr>
-        </Thead>
-        <Tbody>
-          {pageData.map((repo, rowIndex) => (
-            <Tr key={repo.name} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
-              <Td
-                key={`select-${rowIndex}`}
-                select={{
-                  rowIndex,
-                  onSelect: (_event, isSelecting) => onSelect(isSelecting, repo),
-                  isSelected: isSelected(repo),
-                  isDisabled: false
-                }}
-              />
-              {Object.keys(cols).map((column, colIndex) => (
-                <Td key={colIndex} data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}>{repo[column]}</Td>
-              ))}
-            </Tr>
-          ))}
-        </Tbody>
-      </Table>
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={pageRows} />
       <DataViewToolbar
         ouiaId='LayoutExampleFooter'
         pagination={

package/src/DataView/DataView.tsx

@@ -1,15 +1,21 @@
 import React from 'react';
 import { Stack, StackItem } from '@patternfly/react-core';
+import { DataViewSelection, InternalContextProvider } from '../InternalContext';
+
 export interface DataViewProps {
   /** Content rendered inside the data view */
   children: React.ReactNode;
   /** Custom OUIA ID */
   ouiaId?: string;
+  /** Selection context configuration */
+  selection?: DataViewSelection
 }
 
-export const DataView: React.FC<DataViewProps> = ({
+export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;
+
+const DataViewImplementation: React.FC<DataViewImpementationProps> = ({
   children, ouiaId = 'DataView', ...props
-}: DataViewProps) => (
+}: DataViewImpementationProps) => (
   <Stack data-ouia-component-id={`${ouiaId}-stack}`} {...props}>
     {React.Children.map(children, (child, index) => (
       <StackItem data-ouia-component-id={`${ouiaId}-stack-item-${index}`}>
@@ -19,4 +25,10 @@ export const DataView: React.FC<DataViewProps> = ({
   </Stack>
 )
 
+export const DataView: React.FC<DataViewProps> = ({ children, selection, ...props }: DataViewProps) => (
+  <InternalContextProvider selection={selection}>
+    <DataViewImplementation {...props}>{children}</DataViewImplementation>
+  </InternalContextProvider>
+);
+
 export default DataView;

package/src/DataViewEventsContext/DataViewEventsContext.test.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { useDataViewEventsContext, DataViewEventsProvider, EventTypes } from './DataViewEventsContext';
+
+let id = 0;
+
+beforeAll(() => {
+  Object.defineProperty(global, 'crypto', {
+    value: {
+      randomUUID: jest.fn(() => `mocked-uuid-${id++}`),
+    },
+  });
+});
+
+describe('DataViewEventsContext', () => {
+  test('should provide context value and allow subscriptions', () => {
+    const callback = jest.fn();
+
+    const TestComponent = () => {
+      const { subscribe, trigger } = useDataViewEventsContext();
+
+      React.useEffect(() => {
+        const unsubscribe = subscribe(EventTypes.rowClick, callback);
+        return () => unsubscribe();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+
+      return (
+        <button onClick={() => trigger(EventTypes.rowClick, 'some payload')}>Trigger</button>
+      );
+    };
+
+    const { getByText } = render(
+      <DataViewEventsProvider>
+        <TestComponent />
+      </DataViewEventsProvider>
+    );
+
+    fireEvent.click(getByText('Trigger'));
+    expect(callback).toHaveBeenCalledWith('some payload');
+  });
+
+  test('should handle unsubscribing correctly', () => {
+    const callback = jest.fn();
+
+    const TestComponent = () => {
+      const { subscribe, trigger } = useDataViewEventsContext();
+
+      React.useEffect(() => {
+        const unsubscribe = subscribe(EventTypes.rowClick, callback);
+        unsubscribe();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+
+      return (
+        <button onClick={() => trigger(EventTypes.rowClick, 'some payload')}>Trigger</button>
+      );
+    };
+
+    const { getByText } = render(
+      <DataViewEventsProvider>
+        <TestComponent />
+      </DataViewEventsProvider>
+    );
+
+    fireEvent.click(getByText('Trigger'));
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  test('should handle multiple subscriptions and trigger events correctly', () => {
+    const callback1 = jest.fn();
+    const callback2 = jest.fn();
+
+    const TestComponent = () => {
+      const { subscribe, trigger } = useDataViewEventsContext();
+
+      React.useEffect(() => {
+        const unsubscribe1 = subscribe(EventTypes.rowClick, callback1);
+        const unsubscribe2 = subscribe(EventTypes.rowClick, callback2);
+        
+        return () => {
+          unsubscribe1();
+          unsubscribe2();
+        };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+
+      return (
+        <button onClick={() => trigger(EventTypes.rowClick, 'some payload')}>Trigger</button>
+      );
+    };
+
+    const { getByText } = render(
+      <DataViewEventsProvider>
+        <TestComponent />
+      </DataViewEventsProvider>
+    );
+
+    fireEvent.click(getByText('Trigger'));
+
+    expect(callback1).toHaveBeenCalledWith('some payload');
+    expect(callback2).toHaveBeenCalledWith('some payload');
+  });
+});

package/src/DataViewEventsContext/DataViewEventsContext.tsx

@@ -0,0 +1,70 @@
+import React, {
+  PropsWithChildren,
+  createContext,
+  useCallback,
+  useContext,
+  useState
+} from "react";
+
+export const EventTypes = {
+  rowClick: 'rowClick'
+} as const;
+
+export type DataViewEvent = typeof EventTypes[keyof typeof EventTypes];
+
+type Callback = (...args: any[]) => void;    // eslint-disable-line @typescript-eslint/no-explicit-any
+interface Subscriptions { [id: string]: Callback }
+type EventSubscriptions = { [event in DataViewEvent]: Subscriptions };
+type Subscribe = (event: DataViewEvent, callback: Callback) => () => void;
+type Trigger = (event: DataViewEvent, ...payload: any[]) => void;    // eslint-disable-line @typescript-eslint/no-explicit-any
+
+export interface DataViewEventsContextValue {
+  subscribe: Subscribe;
+  trigger: Trigger;
+}
+
+export const DataViewEventsContext = createContext<DataViewEventsContextValue>({
+  subscribe: () => () => null,
+  trigger: () => null
+});
+
+export const DataViewEventsProvider = ({ children }: PropsWithChildren) => {
+  const [ subscriptions, setSubscriptions ] = useState<EventSubscriptions>({
+    [EventTypes.rowClick]: {}
+  });
+
+  const subscribe: Subscribe = (event, callback) => {
+    const id = crypto.randomUUID();
+
+    // set new subscription
+    setSubscriptions(prevSubscriptions => ({
+      ...prevSubscriptions,
+      [event]: { ...prevSubscriptions[event], [id]: callback }
+    }));
+
+    // return unsubscribe function
+    return () => {
+      setSubscriptions(prevSubscriptions => {
+        const updatedSubscriptions = { ...prevSubscriptions };
+        delete updatedSubscriptions[event][id];
+        return updatedSubscriptions;
+      });
+    };
+  };
+
+  const trigger = useCallback((event: DataViewEvent, ...payload: unknown[]) => {
+    Object.values(subscriptions[event]).forEach(callback => {
+      callback(...payload);
+    });
+  }, [ subscriptions ]);
+
+  return (
+    <DataViewEventsContext.Provider value={{ subscribe, trigger }}>
+      {children}
+    </DataViewEventsContext.Provider>
+  );
+};
+
+export const useDataViewEventsContext = () => useContext(DataViewEventsContext);
+
+export default DataViewEventsContext;

package/src/DataViewEventsContext/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DataViewEventsContext';
+export * from './DataViewEventsContext';

package/src/DataViewTable/DataViewTable.test.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DataViewTable, DataViewTrTree } from './DataViewTable';
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+  children?: Repository[];
+}
+
+const repositories: Repository[] = [
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+];
+
+const rows = repositories.map(repo => ({ row: Object.values(repo) }));
+
+const repositoriesTree: Repository[] = [
+  { 
+    name: 'Repository one',
+    branches: 'Branch one',
+    prs: 'Pull request one',
+    workspaces: 'Workspace one',
+    lastCommit: 'Timestamp one',
+    children: [
+      { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+      { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+    ]
+  },
+  { 
+    name: 'Repository four',
+    branches: 'Branch four',
+    prs: 'Pull request four',
+    workspaces: 'Workspace four',
+    lastCommit: 'Timestamp four',
+    children: [ { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' } ]
+  },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+];
+
+
+
+const buildRows = (repositories: Repository[]): DataViewTrTree[] => repositories.map((repo) => ({
+  row: [ repo.name, repo.branches, repo.prs, repo.workspaces, repo.lastCommit ],
+  id: repo.name, // unique ID for each row
+  ...(repo.children
+    ? { 
+      children: buildRows(repo.children) // build rows for children
+    }
+    : {})
+}));
+
+const treeRows = buildRows(repositoriesTree);
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'TableExample';
+
+describe('DataViewTable component', () => {
+  test('should render a basic table correctly', () => {
+    const { container } = render(
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('should render a tree table correctly', () => {
+    const { container } = render(
+      <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={treeRows} />
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/DataViewTable/DataViewTable.tsx

@@ -0,0 +1,37 @@
+import React, { ReactNode } from 'react';
+import {
+  TdProps,
+  ThProps,
+  TrProps
+} from '@patternfly/react-table';
+import { DataViewTableTree, DataViewTableTreeProps } from '../DataViewTableTree';
+import { DataViewTableBasic, DataViewTableBasicProps } from '../DataViewTableBasic';
+
+// Table header typings
+export type DataViewTh = ReactNode | { cell: ReactNode; props?: ThProps };
+export const isDataViewThObject = (value: DataViewTh): value is { cell: ReactNode; props?: ThProps } => value != null && typeof value === 'object' && 'cell' in value;
+
+// Basic table typings
+export interface DataViewTrObject { row: DataViewTd[], id?: string, props?: TrProps }
+export type DataViewTd = ReactNode | { cell: ReactNode; props?: TdProps };
+export type DataViewTr = DataViewTd[] | DataViewTrObject;
+
+export const isDataViewTdObject = (value: DataViewTd): value is { cell: ReactNode; props?: TdProps } => value != null && typeof value === 'object' && 'cell' in value;
+export const isDataViewTrObject = (value: DataViewTr): value is { row: DataViewTd[], id?: string } => value != null && typeof value === 'object' && 'row' in value;
+
+// Tree table typings
+export interface DataViewTrTree extends DataViewTrObject { id: string, children?: DataViewTrTree[] }
+
+export type DataViewTableProps =
+  | ({
+      isTreeTable: true;
+    } & DataViewTableTreeProps)
+  | ({
+      isTreeTable?: false;
+    } & DataViewTableBasicProps);
+
+export const DataViewTable: React.FC<DataViewTableProps> = (props) => (
+  props.isTreeTable ? <DataViewTableTree {...props} /> : <DataViewTableBasic {...props} />
+);
+
+export default DataViewTable;