gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-20 01:25:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix full width tables

Browse Source
This commit is contained in:
Peter White
2026-03-25 13:40:56 +01:00
parent 7d44da61d6
commit 03e276eb45
2 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/gitbook/src/components/DocumentView/Table/Table.tsx
+17 -4
View File
@@ -8,7 +8,7 @@ import { isBlockOffscreen } from '../utils';
import { StickyViewGrid } from './StickyViewGrid';
import { ViewCards } from './ViewCards';
import { ViewGrid, ViewGridHeader } from './ViewGrid';
import { hasVisibleHeader } from './layout';
import { getViewGridLayout, hasVisibleHeader } from './layout';
export type TableRecordKV = [string, DocumentTableRecord];
@@ -43,6 +43,13 @@ export function Table(props: BlockProps<DocumentBlockTable>) {
isOffscreen,
records,
};
const { tableWidth } = getViewGridLayout({
block,
view: block.data.view,
mode: context.mode,
});
const tableContainerClassName =
tableWidth === 'w-full' ? 'min-w-full w-fit' : tableWidth;
const withHeader = hasVisibleHeader(block, block.data.view);
const withStickyHeader =
withHeader && context.mode !== 'print' && block.data.view.stickyHeader === true;
@@ -51,6 +58,7 @@ export function Table(props: BlockProps<DocumentBlockTable>) {
return (
<StickyViewGrid
className={tcls(style, 'relative mx-auto grid w-full min-w-0')}
tableClassName={tableContainerClassName}
header={
<ViewGridHeader
{...gridProps}
@@ -77,9 +85,14 @@ export function Table(props: BlockProps<DocumentBlockTable>) {
'w-full min-w-0 overflow-x-auto overflow-y-hidden overscroll-x-none border-tint-subtle '
)}
>
<div className={tcls('flex', 'flex-col', 'w-fit')}>
{withHeader ? <ViewGridHeader {...gridProps} /> : null}
<ViewGrid {...gridProps} />
<div className={tcls('flex', 'flex-col', tableContainerClassName)}>
{withHeader ? (
<ViewGridHeader
{...gridProps}
className={tableContainerClassName}
/>
) : null}
<ViewGrid {...gridProps} tableClassName={tableContainerClassName} />
</div>
</div>
</div>
packages/gitbook/src/components/DocumentView/Table/ViewGrid.tsx
+7 -3
View File
@@ -11,6 +11,10 @@ interface ViewGridHeaderProps extends TableViewProps<DocumentTableViewGrid> {
className?: string;
}
interface ViewGridProps extends TableViewProps<DocumentTableViewGrid> {
tableClassName?: string;
}
export function ViewGridHeader(props: ViewGridHeaderProps) {
const { block, view, context, className } = props;
const { tableWidth, columnWidths, autoSizedColumns, fixedColumns } = getViewGridLayout({
@@ -63,8 +67,8 @@ export function ViewGridHeader(props: ViewGridHeaderProps) {
);
}
export function ViewGrid(props: TableViewProps<DocumentTableViewGrid>) {
const { block, view, records, context } = props;
export function ViewGrid(props: ViewGridProps) {
const { block, view, records, context, tableClassName } = props;
const { tableWidth, autoSizedColumns, fixedColumns } = getViewGridLayout({
block,
view,
@@ -86,7 +90,7 @@ export function ViewGrid(props: TableViewProps<DocumentTableViewGrid>) {
);
return (
<div role="table" className={tcls('flex', 'flex-col', 'w-fit')}>
<div role="table" className={tcls('flex', 'flex-col', tableClassName ?? 'w-fit')}>
{body}
</div>
);