add opportunity to customize table header cells

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## 0.0.22
 
+* Add opportunity to customize table header cells
+
 ## 0.0.21
 
 * Upfill `UIKitWidth`

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Table.kt

@@ -10,16 +10,16 @@ import org.w3c.dom.*
 
 @Composable
 fun <T> DefaultTable(
-    heading: List<String>,
+    headerBuilders: List<ContentBuilder<HTMLTableCellElement>>,
     dataList: SnapshotStateList<T>,
     vararg tableModifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLTableElement> = {},
-    headerCellCustomizer: AttrsBuilder<HTMLTableCellElement>.(i: Int, title: String) -> Unit = { _, _ -> },
+    headerCellCustomizer: AttrsBuilder<HTMLTableCellElement>.(i: Int) -> Unit = { },
     rowAttributes: AttrsBuilder<HTMLTableRowElement>.(t: T) -> Unit = {},
     cellCustomizer: AttrsBuilder<HTMLTableCellElement>.(i: Int, t: T) -> Unit = { _, _ -> },
     cellFiller: @Composable ElementScope<HTMLTableCellElement>.(i: Int, t: T) -> Unit
 ) {
-    val headingIndexes = heading.indices
+    val headingIndexes = headerBuilders.indices
     Table(
         {
             classes("uk-table")
@@ -29,13 +29,13 @@ fun <T> DefaultTable(
     ) {
         Thead {
             Tr {
-                heading.forEachIndexed { i, t ->
+                headerBuilders.forEachIndexed { i, t ->
                     Th(
                         {
-                            headerCellCustomizer(i, t)
+                            headerCellCustomizer(i)
                         }
                     ) {
-                        Text(t)
+                        t()
                     }
                 }
             }
@@ -61,3 +61,37 @@ fun <T> DefaultTable(
         }
     }
 }
+
+@Composable
+fun <T> DefaultTable(
+    heading: List<String>,
+    dataList: SnapshotStateList<T>,
+    vararg tableModifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLTableElement> = {},
+    headerCellCustomizer: AttrsBuilder<HTMLTableCellElement>.(i: Int, title: String) -> Unit = { _, _ -> },
+    rowAttributes: AttrsBuilder<HTMLTableRowElement>.(t: T) -> Unit = {},
+    cellCustomizer: AttrsBuilder<HTMLTableCellElement>.(i: Int, t: T) -> Unit = { _, _ -> },
+    cellFiller: @Composable ElementScope<HTMLTableCellElement>.(i: Int, t: T) -> Unit
+) {
+    val headersByIndex = heading.mapIndexed { index, s -> index to s }.toMap()
+    val headerCellCustomizer: AttrsBuilder<HTMLTableCellElement>.(i: Int) -> Unit = { i ->
+        val header = headersByIndex[i]
+        if (header != null) {
+            headerCellCustomizer(i, header)
+        }
+    }
+    inline fun headerFactory(header: String): ContentBuilder<HTMLTableCellElement> = {
+        Text(header)
+    }
+    val headerBuilders = heading.map(::headerFactory)
+    return DefaultTable(
+        headerBuilders,
+        dataList,
+        tableModifiers = tableModifiers,
+        attributesCustomizer,
+        headerCellCustomizer,
+        rowAttributes,
+        cellCustomizer,
+        cellFiller
+    )
+}