palantir/blueprint

[Table] Auto-size column widths based on cell contents and a maximum width

Open

#1,863 opened on Dec 4, 2017

View on GitHub
 (10 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
Package: tableType: feature requesthelp wanted

Description

Currently you have to manually set the sizes of each column, but we've had requests for the columns to auto-size based on their contents.

It'd be fine if this were a instance method function like the resize rows functions: http://blueprintjs.com/docs/#table-js.instance-methods.

It could either by a getColumnWidths function, or a autoSetColumnWidths(maxSize).

Contributor guide

Tech stack
typescriptreact
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactTypeScriptBlueprint Table API
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Review the existing resize rows functions in the Table component under /packages/table/src/. Understand the pattern used for those methods, then design a similar auto sizing method that calculates column widths based on cell content, respecting a maximum width parameter. Consider performance and test with sample data.