diff --git a/src/components/data/DataTable.tsx b/src/components/data/DataTable.tsx index a670a67d..b68f700e 100644 --- a/src/components/data/DataTable.tsx +++ b/src/components/data/DataTable.tsx @@ -40,6 +40,9 @@ type ComponentProps = { /** Callback to render an individual table cell */ renderItem?: (r: Row, field: keyof Row) => ComponentChildren; title: string; + + /** Turn off outer table borders */ + borderless?: boolean; }; export type DataTableProps = CompositeProps & @@ -63,6 +66,9 @@ export default function DataTable({ onConfirmRow, emptyMessage, + // Forwarded to Table + borderless, + ...htmlAttributes }: DataTableProps) { const tableRef = useSyncedRef(elementRef); @@ -133,7 +139,8 @@ export default function DataTable({ title={title} elementRef={downcastRef(tableRef)} interactive={!!(onSelectRow || onConfirmRow)} - stickyHeader={true} + stickyHeader + borderless={borderless} > diff --git a/src/pattern-library/components/patterns/data/DataTablePage.tsx b/src/pattern-library/components/patterns/data/DataTablePage.tsx index a53f5c93..d791143f 100644 --- a/src/pattern-library/components/patterns/data/DataTablePage.tsx +++ b/src/pattern-library/components/patterns/data/DataTablePage.tsx @@ -488,6 +488,18 @@ export default function DataTablePage() { + + + + See{' '} + + borderless Table + + . + + + + diff --git a/src/pattern-library/components/patterns/data/TablePage.tsx b/src/pattern-library/components/patterns/data/TablePage.tsx index 89318249..2512b3e7 100644 --- a/src/pattern-library/components/patterns/data/TablePage.tsx +++ b/src/pattern-library/components/patterns/data/TablePage.tsx @@ -281,7 +281,7 @@ export default function TablePage() { - + Set this boolean prop if you want to remove the table{"'"}s