diff --git a/frontend/src/components/data-table/data-table.tsx b/frontend/src/components/data-table/data-table.tsx index 44f37524051..17fcca9dc3a 100644 --- a/frontend/src/components/data-table/data-table.tsx +++ b/frontend/src/components/data-table/data-table.tsx @@ -75,6 +75,7 @@ interface DataTableProps extends Partial { wrapperClassName?: string; className?: string; maxHeight?: number; + width?: "auto" | "full"; columns: ColumnDef[]; data: TData[]; rawData?: TData[]; // raw data for filtering/copying (present only if format_mapping is provided) @@ -135,6 +136,7 @@ const DataTableInternal = ({ wrapperClassName, className, maxHeight, + width = "full", columns, data, rawData, @@ -384,10 +386,7 @@ const DataTableInternal = ({ )} {showLoadingBar && ( diff --git a/frontend/src/plugins/impl/DataTablePlugin.tsx b/frontend/src/plugins/impl/DataTablePlugin.tsx index a2ace849490..bb1553d81e1 100644 --- a/frontend/src/plugins/impl/DataTablePlugin.tsx +++ b/frontend/src/plugins/impl/DataTablePlugin.tsx @@ -179,6 +179,7 @@ interface Data { pagination: boolean; pageSize: number; maxHeight?: number; + width?: "auto" | "full"; selection: DataTableSelection; showDownload: boolean; showFilters: boolean; @@ -280,6 +281,7 @@ export const DataTablePlugin = createPlugin("marimo-table") maxColumns: z.union([z.number(), z.literal("all")]).default("all"), hasStableRowId: z.boolean().default(false), maxHeight: z.number().optional(), + width: z.enum(["auto", "full"]).default("full"), cellStyles: z .record(z.string(), z.record(z.string(), z.object({}).passthrough())) .optional(), @@ -861,6 +863,7 @@ const DataTableComponent = ({ getRow, cellId, maxHeight, + width, }: DataTableProps & DataTableSearchProps & { data: unknown[]; @@ -1120,6 +1123,7 @@ const DataTableComponent = ({ columns={columns} className={className} maxHeight={maxHeight} + width={width} sorting={sorting} totalRows={totalRows} sizeBytes={sizeBytes} diff --git a/marimo/_plugins/ui/_impl/table.py b/marimo/_plugins/ui/_impl/table.py index b23c5996726..d5d3549a86e 100644 --- a/marimo/_plugins/ui/_impl/table.py +++ b/marimo/_plugins/ui/_impl/table.py @@ -479,6 +479,9 @@ def hover_cell(rowId, columnName, value): max_height (int, optional): Maximum height of the table body in pixels. When set, the table becomes vertically scrollable and the header will be made sticky in the UI to remain visible while scrolling. Defaults to None. + width (Literal["auto", "full"], optional): Width behavior of the table. + "auto" uses minimum width needed for columns (good for few columns with short data). + "full" fills the available width (default, good for most cases). label (str, optional): A descriptive name for the table. Defaults to "". """ @@ -581,6 +584,7 @@ def __init__( style_cell: Callable[[str, str, Any], dict[str, Any]] | None = None, hover_template: str | Callable[[str, str, Any], str] | None = None, max_height: int | None = None, + width: Literal["auto", "full"] = "full", # The _internal_* arguments are for overriding and unit tests # table should take the value unconditionally _internal_column_charts_row_limit: int | None = None, @@ -859,6 +863,7 @@ def __init__( "max-height": int(max_height) if max_height is not None else None, + "width": width, }, on_change=on_change, functions=(