UserTable Improvements

Improve UserTable

Author: aerialist7

build.gradle.kts

@@ -2,40 +2,20 @@ plugins {
  kotlin("js") version "1.4.21"
 }
 
-group = "com.github.aerialist7"
-version = "1.0.0-SNAPSHOT"
-
 repositories {
  jcenter()
- mavenCentral()
- maven { url = uri("https://dl.bintray.com/kotlin/kotlin-js-wrappers") }
 }
 
 dependencies {
- testImplementation(kotlin("test-js"))
- implementation("org.jetbrains:kotlin-react:17.0.1-pre.136-kotlin-1.4.10")
- implementation("org.jetbrains:kotlin-react-dom:17.0.1-pre.136-kotlin-1.4.10")
- implementation("org.jetbrains:kotlin-react-table:7.6.2-pre.136-kotlin-1.4.10")
- implementation("org.jetbrains:kotlin-styled:5.2.0-pre.136-kotlin-1.4.10")
+ implementation("org.jetbrains:kotlin-react:17.0.1-pre.137-kotlin-1.4.21")
+ implementation("org.jetbrains:kotlin-react-dom:17.0.1-pre.137-kotlin-1.4.21")
+ implementation("org.jetbrains:kotlin-react-table:7.6.3-pre.137-kotlin-1.4.21")
+ implementation("org.jetbrains:kotlin-styled:5.2.0-pre.137-kotlin-1.4.21")
 }
 
-kotlin {
- js(LEGACY) {
- browser {
- binaries.executable()
- webpackTask {
- cssSupport.enabled = true
- }
- runTask {
- cssSupport.enabled = true
- }
- testTask {
- useKarma {
- useChromeHeadless()
- webpackConfig.cssSupport.enabled = true
- }
- }
- }
+kotlin.js {
+ browser {
+ binaries.executable()
  }
 }
 

gradle.properties

@@ -1,2 +1,5 @@
+group=com.github.aerialist7
+version=1.0.0-SNAPSHOT
+
 kotlin.code.style=official
 kotlin.js.generate.executable.default=false

src/main/kotlin/Colors.kt

@@ -0,0 +1,18 @@
+import kotlinx.css.Color
+
+object Colors {
+ object Text {
+ val Black: Color = Color("#2E2E2E")
+ val Gray: Color = Color("#75829E")
+ }
+
+ object Background {
+ val Gray: Color = Color("#EDEDF3")
+ val White: Color = Color("#FFFFFF")
+ }
+
+ object Stroke {
+ val LightGray: Color = Color("#F4F4F4")
+ val Gray: Color = Color("#DEE1E9")
+ }
+}

src/main/kotlin/Hooks.kt

@@ -0,0 +1,14 @@
+import react.useCallback
+import react.useMemo
+
+fun <T> useMemo(
+ vararg dependencies: dynamic,
+ callback: () -> T,
+): T =
+ useMemo(callback, dependencies)
+
+fun <T : Function<*>> useCallback(
+ vararg dependencies: dynamic,
+ callback: () -> T,
+): () -> T =
+ useCallback(callback, dependencies)

src/main/kotlin/Main.kt

@@ -0,0 +1,16 @@
+import kotlinx.browser.document
+import react.child
+import react.dom.render
+
+fun main() {
+ render(document.getElementById("root")) {
+ child(UserTable) {
+ attrs.data = arrayOf(
+ User("Victor", 32),
+ User("Alexander", 26),
+ User("Catherine", 25),
+ User("Nicolas", 25),
+ )
+ }
+ }
+}

src/main/kotlin/Tags.kt

@@ -0,0 +1,13 @@
+import kotlinext.js.Object
+import kotlinx.html.Tag
+import react.RProps
+
+var Tag.extraAttrs: RProps
+ @Deprecated(level = DeprecationLevel.HIDDEN, message = "write only")
+ get() = error("write only")
+ set(value) {
+ for (key in Object.keys(value)) {
+ @Suppress("UnsafeCastFromDynamic")
+ attributes[key] = value.asDynamic()[key]
+ }
+ }

src/main/kotlin/User.kt

@@ -0,0 +1,4 @@
+data class User(
+ val name: String,
+ val age: Int,
+)

src/main/kotlin/table.kt renamed to src/main/kotlin/UserTable.kt

@@ -1,7 +1,5 @@
-import kotlinext.js.Object
 import kotlinx.browser.window
 import kotlinx.css.*
-import kotlinx.html.Tag
 import kotlinx.html.js.onClickFunction
 import react.RProps
 import react.dom.tr
@@ -12,49 +10,51 @@ import react.table.useTable
 import styled.*
 
 external interface UserTableProps : RProps {
- var headers: Array<String>
- var users: Array<User>
+ var data: Array<out User>
 }
 
-data class User(
- val name: String,
- val age: Int,
-)
-
 val UserTable = functionalComponent<UserTableProps> { props ->
- val onRowClick = { user: User ->
- window.alert(user.name)
+ val onRowClick = useCallback {
+ { user: User -> window.alert(user.name) }
  }
 
- val table = useTable<User> {
- data = props.users
- columns = columns {
+ val columns = useMemo {
+ columns<User> {
  column<String> {
- header = props.headers[0]
+ header = "Name"
  accessorFunction = { it.name }
  }
  column<Int> {
- header = props.headers[1]
+ header = "Age"
  accessorFunction = { it.age }
  }
  }
  }
 
+ val table = useTable<User> {
+ this.data = props.data
+ this.columns = columns
+ }
+
  styledDiv {
  styledTable {
  css {
- width = 100.pct
+ width = 400.px
  borderSpacing = 0.px
  borderCollapse = BorderCollapse.collapse
  whiteSpace = WhiteSpace.nowrap
+ borderWidth = 2.px
+ borderStyle = BorderStyle.solid
+ borderColor = Colors.Stroke.Gray
+ margin(LinearDimension.auto)
  }
  attrs {
  extraAttrs = table.getTableProps()
  }
  styledThead {
  css {
  color = Colors.Text.Gray
- fontSize = 12.px
+ fontSize = 18.px
  backgroundColor = Colors.Background.Gray
  }
 
@@ -109,7 +109,7 @@ val UserTable = functionalComponent<UserTableProps> { props ->
 
  styledTr {
  css {
- fontSize = 14.px
+ fontSize = 16.px
  cursor = Cursor.pointer
  borderBottom = solid(Colors.Stroke.LightGray)
  hover {
@@ -119,7 +119,7 @@ val UserTable = functionalComponent<UserTableProps> { props ->
 
  attrs {
  extraAttrs = row.getRowProps()
- onClickFunction = { onRowClick(row.original) }
+ onClickFunction = { onRowClick()(row.original) }
  }
 
  for (cell in row.cells) {
@@ -142,35 +142,8 @@ val UserTable = functionalComponent<UserTableProps> { props ->
  }
 }
 
-object Colors {
- object Text {
- val Black: Color = Color("#2E2E2E")
- val Gray: Color = Color("#75829E")
- }
-
- object Background {
- val Gray: Color = Color("#EDEDF3")
- val White: Color = Color("#FFFFFF")
- }
-
- object Stroke {
- val LightGray: Color = Color("#F4F4F4")
- val Gray: Color = Color("#DEE1E9")
- }
-}
-
-fun solid(
+private fun solid(
  color: Color,
  thickness: Int = 1,
 ): String =
  "${thickness}px solid $color"
-
-var Tag.extraAttrs: RProps
- @Deprecated(level = DeprecationLevel.HIDDEN, message = "write only")
- get() = error("write only")
- set(value) {
- for (key in Object.keys(value)) {
- @Suppress("UnsafeCastFromDynamic")
- attributes[key] = value.asDynamic()[key]
- }
- }

src/main/kotlin/client.kt

@@ -5,7 +5,7 @@
  <title>Kotlin React Table</title>
 </head>
 <body>
-<script src="kotlin-react-table-sample.js"></script>
 <div id="root"></div>
+<script src="kotlin-react-table-sample.js"></script>
 </body>
 </html>