diff --git a/docs/api/config/js_kanban_cardheight_config.md b/docs/api/config/js_kanban_cardheight_config.md
index 8a36d1be..195da4a6 100644
--- a/docs/api/config/js_kanban_cardheight_config.md
+++ b/docs/api/config/js_kanban_cardheight_config.md
@@ -19,6 +19,8 @@ cardHeight?: number; // px
:::important
If you combine the [`renderType: "lazy"`](api/config/js_kanban_rendertype_config.md) and [`scrollType: "default"`](api/config/js_kanban_scrolltype_config.md) settings, don't forget to specify a static height for cards via the `cardHeight` property. Unless you specify it, the cards will not be displayed.
When you use [`renderType: "lazy"`](api/config/js_kanban_rendertype_config.md) with [`scrollType: "column"`](api/config/js_kanban_scrolltype_config.md), you should also fix the height of cards via the `cardHeight` property. Although a variable height of cards is supported for this type of layout, it may not work in a stable manner with custom card content.
+
+If `cardHeight` is not specified, the widget falls back to an experimental approximation of card heights based on the visible fields declared in [`cardShape`](api/config/js_kanban_cardshape_config.md). With a custom [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md), this approximation does not apply — in that case, either set `cardHeight` explicitly or supply a custom [`getCardHeight`](api/config/js_kanban_getcardheight_config.md) function.
:::
### Example
diff --git a/docs/api/config/js_kanban_columnshape_config.md b/docs/api/config/js_kanban_columnshape_config.md
index 32690d86..ba347fa3 100644
--- a/docs/api/config/js_kanban_columnshape_config.md
+++ b/docs/api/config/js_kanban_columnshape_config.md
@@ -30,10 +30,10 @@ columnShape?: {
},
fixedHeaders?: boolean,
css?: (column, cards) => string,
- headerTemplate?: template(column => {
+ headerTemplate?: template(props => {
return "The HTML template of the column header in the expanded state";
}),
- collapsedTemplate?: template(column => {
+ collapsedTemplate?: template(props => {
return "The HTML template of the column header in the collapsed state";
}),
confirmDeletion?: boolean
@@ -94,8 +94,28 @@ To configure the columns appearance, in the **columnShape** object you can speci
- `fixedHeaders` - (optional) freezes column headers during vertical scroll (*true* by default). Scroll must be enabled in Kanban itself (height must be limited)
- `css` - (optional) a function that returns a css class that applies to columns conditionally
-- `headerTemplate` - (optional) the HTML template of the column header in the expanded state
-- `collapsedTemplate` - (optional) the HTML template of the column header in the collapsed state
+- `headerTemplate` - (optional) the HTML template of the column header in the expanded state. The function receives a `props` object with the following properties:
+ - `column` - (object) the column data (see [`columns`](api/config/js_kanban_columns_config.md) for the structure)
+ - `columnState` - (object) the current state of the column. It always includes:
+ - ***columnId*** - (string | number) the ID of the column
+ - ***column*** - (object) the column data (same as `props.column`)
+ - ***cardsCount*** - (number) the number of cards in the column
+ - ***noFreeSpace*** - (boolean) ***true*** when the column cannot accept more cards
+
+ When the [`columns[i].limit`](api/config/js_kanban_columns_config.md) parameter is enabled, it also includes:
+ - ***totalLimit*** - (number) the configured cards limit
+ - ***isOverLimit*** - (boolean) ***true*** when the number of cards exceeds the limit
+
+ When the column belongs to a swimlane (row), it also includes:
+ - ***rowId*** - (string | number) the ID of the row
+ - ***row*** - (object) the row data (see [`rows`](api/config/js_kanban_rows_config.md) for the structure)
+ - ***height*** - (number) the height of the area
+ - `isMenuVisible` - (boolean) ***true*** when the menu should be shown for this column header
+ - `renaming` - (boolean) ***true*** when the input for editing the column name is active
+ - `readonly` - (boolean) ***true*** when column editing is disabled (equivalent of `!readonly.edit`, see the [`readonly`](api/config/js_kanban_readonly_config.md) property)
+- `collapsedTemplate` - (optional) the HTML template of the column header in the collapsed state. The function receives a `props` object with the following properties:
+ - `column` - (object) the column data (see [`columns`](api/config/js_kanban_columns_config.md))
+ - `columnState` - (object) the current state of the column. The shape is the same as `columnState` in the [`headerTemplate`](#parameters) parameter above
- `confirmDeletion` - (optional) shows/hides the **confirmation dialog** that allows users to confirm or decline the column deletion
### Default config
@@ -160,30 +180,30 @@ const columnShape = {
},
fixedHeaders: false,
css: (column, cards) => column.id == "inprogress" && cards.length < 5 ? "green" : "red",
- headerTemplate: template(column => {
+ headerTemplate: template(props => {
return `
-
+
${
- !column.column.collapsed
+ !props.column.collapsed
? `
- ${escapeHTML(column.column.label)}
- (${column.columnState.cardsCount})
+ ${escapeHTML(props.column.label)}
+ (${props.columnState.cardsCount})
`
: ""
}
${
- !column.column.collapsed
- ? `