# Auto Column Sizing Example

## Plugin Options:

GridAutosizeColsMode None Legacy Off Legacy Force Fit IgnoreViewport FitColsToViewport FitViewportToCols
viewportSwitchToScrollModeWidthPercent
viewportMinWidthPx
viewportMaxWidthPx
autosizeColPaddingPx
autosizeTextAvgToMWidthRatio

## Column Options:

'Locked' and 'Guide' use column width. Others will use content. When retrieving content values for a column, the first defined of the following will be used:

- 'colValueArray' will be used to provide a list of values
- 'formatterOverride' function will be used to retrieve row values
- 'formatter' function will be used to retrieve row values
- raw row values

Column 1 (#)
autosizeMode Locked Guide Content ContentIntelligent
rowSelectionMode FirstRow FirstNRows AllRows LastRow rowSelectionCount
valueFilterMode None DeDuplicate GetGreatestAndSub GetLongestTextAndSub GetLongestText
widthEvalMode CanvasTextSize HTML
ignoreHeaderText
sizeToRemaining
allowAddlPercent
colValueArray
(input as comma separated list)
column.width
(blank = leave unchanged)
Column 2 (Title)
autosizeMode Locked Guide Content ContentIntelligent
rowSelectionMode FirstRow FirstNRows AllRows LastRow rowSelectionCount
valueFilterMode None DeDuplicate GetGreatestAndSub GetLongestTextAndSub GetLongestText
widthEvalMode CanvasTextSize HTML
ignoreHeaderText
sizeToRemaining
allowAddlPercent
colValueArray
(input as comma separated list)
column.width
(blank = leave unchanged)
Column 3 (Duration)
autosizeMode Locked Guide Content ContentIntelligent
rowSelectionMode FirstRow FirstNRows AllRows LastRow rowSelectionCount
valueFilterMode None DeDuplicate GetGreatestAndSub GetLongestTextAndSub GetLongestText
widthEvalMode CanvasTextSize HTML
ignoreHeaderText
sizeToRemaining
allowAddlPercent
colValueArray
(input as comma separated list)
column.width
(blank = leave unchanged)
Column 4 (Random Word)
autosizeMode Locked Guide Content ContentIntelligent
rowSelectionMode FirstRow FirstNRows AllRows LastRow rowSelectionCount
valueFilterMode None DeDuplicate GetGreatestAndSub GetLongestTextAndSub GetLongestText
widthEvalMode CanvasTextSize HTML
ignoreHeaderText
sizeToRemaining
allowAddlPercent
colValueArray
(input as comma separated list)
column.width
(blank = leave unchanged)
Column 5 (% Complete)
autosizeMode Locked Guide Content ContentIntelligent
rowSelectionMode FirstRow FirstNRows AllRows LastRow rowSelectionCount
valueFilterMode None DeDuplicate GetGreatestAndSub GetLongestTextAndSub GetLongestText
widthEvalMode CanvasTextSize HTML
ignoreHeaderText
sizeToRemaining
allowAddlPercent
colValueArray
(input as comma separated list)
column.width
(blank = leave unchanged)
Column 6 (Start)
autosizeMode Locked Guide Content ContentIntelligent
rowSelectionMode FirstRow FirstNRows AllRows LastRow rowSelectionCount
valueFilterMode None DeDuplicate GetGreatestAndSub GetLongestTextAndSub GetLongestText
widthEvalMode CanvasTextSize HTML
ignoreHeaderText
sizeToRemaining
allowAddlPercent
colValueArray
(input as comma separated list)
column.width
(blank = leave unchanged)
Column 7 (Effort Driven)
autosizeMode Locked Guide Content ContentIntelligent
rowSelectionMode FirstRow FirstNRows AllRows LastRow rowSelectionCount
valueFilterMode None DeDuplicate GetGreatestAndSub GetLongestTextAndSub GetLongestText
widthEvalMode CanvasTextSize HTML
ignoreHeaderText
sizeToRemaining
allowAddlPercent
colValueArray
(input as comma separated list)
column.width
(blank = leave unchanged)
Column 8 (Random Text)
autosizeMode Locked Guide Content ContentIntelligent
rowSelectionMode FirstRow FirstNRows AllRows LastRow rowSelectionCount
valueFilterMode None DeDuplicate GetGreatestAndSub GetLongestTextAndSub GetLongestText
widthEvalMode CanvasTextSize HTML
ignoreHeaderText
sizeToRemaining
allowAddlPercent
colValueArray
(input as comma separated list)
column.width
(blank = leave unchanged)

## Test Grid

Time taken = -
Viewport width before = -
Viewport width after = -
(limits -)
Warning: this example has 500,000 rows, so badly optimised column width tests (ie. checking all rows) may take 100 seconds per column. If it looks like the page has crashed, just wait a while!

## View Source:

- View the source for this example on Github

SlickGrid