Changes

BeeTablesCompose/src/main/java/com/breens/beetablescompose/BeeTablesCompose.kt

@@ -15,22 +15,23 @@
  */
 package com.breens.beetablescompose
 
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedCard
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.breens.beetablescompose.components.TableHeaderComponent
+import com.breens.beetablescompose.components.TableHeaderComponentWithoutColumnDividers
 import com.breens.beetablescompose.components.TableRowComponent
+import com.breens.beetablescompose.components.TableRowComponentWithoutDividers
 import com.breens.beetablescompose.utils.extractMembers
 
 /**
@@ -49,37 +50,68 @@ import com.breens.beetablescompose.utils.extractMembers
  * @param rowTextStyle The text style to apply to the data cells in the table rows, by default it will be [MaterialTheme.typography.bodySmall].
  * @param tableElevation The elevation of the entire table (Card elevation) in DP, by default it will be "6.dp".
  * @param shape The shape of the table's corners, by default it will be "RoundedCornerShape(4.dp)".
+ * @param disableVerticalDividers show or hide the vertical dividers between the table cells. If not set, by default the vertical dividers will be shown.
+ * @param horizontalDividerThickness The thickness of the horizontal dividers in DP, by default it will be "1.dp". Note: This will only be visible if [disableVerticalDividers] is set to true.
+ * @param horizontalDividerColor The color of the horizontal dividers, by default it will be [Color.LightGray]. Note: This will only be visible if [disableVerticalDividers] is set to true.
+ * @param contentAlignment The alignment of the content in the table cells, by default it will be [Alignment.Center].
+ * @param textAlign The alignment of the text in the table cells, by default it will be [TextAlign.Center].
  */
 @Composable
 inline fun <reified T : Any> BeeTablesCompose(
     data: List<T>,
     enableTableHeaderTitles: Boolean = true,
     headerTableTitles: List<String>,
     headerTitlesBorderColor: Color = Color.LightGray,
-    headerTitlesBorderWidth: Dp = 0.4.dp,
     headerTitlesTextStyle: TextStyle = MaterialTheme.typography.bodySmall,
     headerTitlesBackGroundColor: Color = Color.White,
     tableRowColors: List<Color> = listOf(Color.White, Color.White),
     rowBorderColor: Color = Color.LightGray,
-    rowBorderWidth: Dp = 0.4.dp,
     rowTextStyle: TextStyle = MaterialTheme.typography.bodySmall,
-    tableElevation: Dp = 6.dp,
+    tableElevation: Dp = 0.dp,
     shape: RoundedCornerShape = RoundedCornerShape(4.dp),
+    borderStroke: BorderStroke = BorderStroke(
+        width = 1.dp,
+        color = Color.LightGray,
+    ),
+    disableVerticalDividers: Boolean = false,
+    dividerThickness: Dp = 1.dp,
+    horizontalDividerColor: Color = Color.LightGray,
+    contentAlignment: Alignment = Alignment.Center,
+    textAlign: TextAlign = TextAlign.Center,
+    tablePadding: Dp = 0.dp,
+    columnToIndexIncreaseWidth: Int? = null,
 ) {
-    Card(elevation = CardDefaults.cardElevation(defaultElevation = tableElevation)) {
-        Column(
-            modifier = Modifier
-                .clip(shape = shape)
-                .verticalScroll(rememberScrollState()),
-        ) {
+    OutlinedCard(
+        elevation = CardDefaults.cardElevation(defaultElevation = tableElevation),
+        shape = shape,
+        border = borderStroke,
+    ) {
+        Column {
             if (enableTableHeaderTitles) {
-                TableHeaderComponent(
-                    headerTableTitles = headerTableTitles,
-                    headerTitlesBorderColor = headerTitlesBorderColor,
-                    headerTitlesBorderWidth = headerTitlesBorderWidth,
-                    headerTitlesTextStyle = headerTitlesTextStyle,
-                    headerTitlesBackGroundColor = headerTitlesBackGroundColor,
-                )
+                if (disableVerticalDividers) {
+                    TableHeaderComponentWithoutColumnDividers(
+                        headerTableTitles = headerTableTitles,
+                        headerTitlesTextStyle = headerTitlesTextStyle,
+                        headerTitlesBackGroundColor = headerTitlesBackGroundColor,
+                        dividerThickness = dividerThickness,
+                        contentAlignment = contentAlignment,
+                        textAlign = textAlign,
+                        tablePadding = tablePadding,
+                        columnToIndexIncreaseWidth = columnToIndexIncreaseWidth,
+                    )
+                } else {
+                    TableHeaderComponent(
+                        headerTableTitles = headerTableTitles,
+                        headerTitlesBorderColor = headerTitlesBorderColor,
+                        headerTitlesTextStyle = headerTitlesTextStyle,
+                        headerTitlesBackGroundColor = headerTitlesBackGroundColor,
+                        contentAlignment = contentAlignment,
+                        textAlign = textAlign,
+                        tablePadding = tablePadding,
+                        dividerThickness = dividerThickness,
+                        columnToIndexIncreaseWidth = columnToIndexIncreaseWidth,
+                    )
+                }
             }
 
             data.forEachIndexed { index, data ->
@@ -94,13 +126,31 @@ inline fun <reified T : Any> BeeTablesCompose(
                     tableRowColors[1]
                 }
 
-                TableRowComponent(
-                    data = rowData,
-                    rowBorderColor = rowBorderColor,
-                    rowBorderWidth = rowBorderWidth,
-                    rowTextStyle = rowTextStyle,
-                    rowBackGroundColor = tableRowBackgroundColor,
-                )
+                if (disableVerticalDividers) {
+                    TableRowComponentWithoutDividers(
+                        data = rowData,
+                        rowTextStyle = rowTextStyle,
+                        rowBackGroundColor = tableRowBackgroundColor,
+                        dividerThickness = dividerThickness,
+                        horizontalDividerColor = horizontalDividerColor,
+                        contentAlignment = contentAlignment,
+                        textAlign = textAlign,
+                        tablePadding = tablePadding,
+                        columnToIndexIncreaseWidth = columnToIndexIncreaseWidth,
+                    )
+                } else {
+                    TableRowComponent(
+                        data = rowData,
+                        rowBorderColor = rowBorderColor,
+                        dividerThickness = dividerThickness,
+                        rowTextStyle = rowTextStyle,
+                        rowBackGroundColor = tableRowBackgroundColor,
+                        contentAlignment = contentAlignment,
+                        textAlign = textAlign,
+                        tablePadding = tablePadding,
+                        columnToIndexIncreaseWidth = columnToIndexIncreaseWidth,
+                    )
+                }
             }
         }
     }

BeeTablesCompose/src/main/java/com/breens/beetablescompose/components/TableHeaderComponent.kt

@@ -21,6 +21,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -39,24 +40,30 @@ import androidx.compose.ui.unit.dp
 fun TableHeaderComponent(
     headerTableTitles: List<String>,
     headerTitlesBorderColor: Color,
-    headerTitlesBorderWidth: Dp,
     headerTitlesTextStyle: TextStyle,
     headerTitlesBackGroundColor: Color,
+    contentAlignment: Alignment,
+    textAlign: TextAlign,
+    tablePadding: Dp,
+    columnToIndexIncreaseWidth: Int?,
+    dividerThickness: Dp,
 ) {
     Row(
         Modifier
             .fillMaxWidth()
-            .background(headerTitlesBackGroundColor),
+            .background(headerTitlesBackGroundColor)
+            .padding(horizontal = tablePadding),
     ) {
-        headerTableTitles.forEach { title ->
+        headerTableTitles.forEachIndexed { index, title ->
+            val weight = if (index == columnToIndexIncreaseWidth) 8f else 2f
             Box(
                 modifier = Modifier
-                    .weight(.3f)
+                    .weight(weight)
                     .border(
-                        width = headerTitlesBorderWidth,
+                        width = dividerThickness,
                         color = headerTitlesBorderColor,
                     ),
-                contentAlignment = Alignment.Center,
+                contentAlignment = contentAlignment,
             ) {
                 Text(
                     text = title,
@@ -65,7 +72,7 @@ fun TableHeaderComponent(
                     modifier = Modifier
                         .height(38.dp)
                         .wrapContentHeight(),
-                    textAlign = TextAlign.Center,
+                    textAlign = textAlign,
                 )
             }
         }
@@ -76,33 +83,15 @@ fun TableHeaderComponent(
 @Preview(showBackground = true)
 fun TableHeaderComponentPreview() {
     val titles = listOf("Team", "Home", "Away", "Points")
-
-    Row(
-        Modifier
-            .fillMaxWidth()
-            .background(Color.White),
-    ) {
-        titles.forEach { title ->
-            Box(
-                modifier = Modifier
-                    .weight(.3f)
-                    .border(
-                        width = 0.4.dp,
-                        color = Color.LightGray,
-                    ),
-                contentAlignment = Alignment.Center,
-            ) {
-                Text(
-                    text = title,
-                    style = MaterialTheme.typography.bodySmall,
-                    color = Color.Black,
-                    overflow = TextOverflow.Ellipsis,
-                    modifier = Modifier
-                        .height(38.dp)
-                        .wrapContentHeight(),
-                    textAlign = TextAlign.Center,
-                )
-            }
-        }
-    }
+    TableHeaderComponent(
+        headerTableTitles = titles,
+        headerTitlesBorderColor = Color.Black,
+        headerTitlesTextStyle = MaterialTheme.typography.labelMedium,
+        headerTitlesBackGroundColor = Color.LightGray,
+        contentAlignment = Alignment.Center,
+        textAlign = TextAlign.Center,
+        tablePadding = 0.dp,
+        columnToIndexIncreaseWidth = null,
+        dividerThickness = 1.dp,
+    )
 }

BeeTablesCompose/src/main/java/com/breens/beetablescompose/components/TableHeaderComponentWithoutColumnDividers.kt

@@ -0,0 +1,101 @@
+/*
+ * Copyright 2023 Breens Mbaka
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package com.breens.beetablescompose.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.material3.Divider
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun TableHeaderComponentWithoutColumnDividers(
+    headerTableTitles: List<String>,
+    headerTitlesTextStyle: TextStyle,
+    headerTitlesBackGroundColor: Color,
+    dividerThickness: Dp,
+    contentAlignment: Alignment,
+    textAlign: TextAlign,
+    tablePadding: Dp,
+    columnToIndexIncreaseWidth: Int?,
+) {
+    Column {
+        Row(
+            Modifier
+                .fillMaxWidth()
+                .background(headerTitlesBackGroundColor)
+                .padding(horizontal = tablePadding),
+        ) {
+            headerTableTitles.forEachIndexed { index, title ->
+                val weight = if (index == columnToIndexIncreaseWidth) 8f else 2f
+                Box(
+                    modifier = Modifier
+                        .weight(weight),
+                    contentAlignment = contentAlignment,
+                ) {
+                    Text(
+                        text = title,
+                        style = headerTitlesTextStyle,
+                        overflow = TextOverflow.Ellipsis,
+                        modifier = Modifier
+                            .height(38.dp)
+                            .wrapContentHeight(),
+                        textAlign = textAlign,
+                    )
+                }
+            }
+        }
+        Divider(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(dividerThickness)
+                .background(headerTitlesBackGroundColor),
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+fun TableHeaderComponentWithoutColumnDividersPreview() {
+    val titles = listOf("Team", "Home", "Away", "Points")
+
+    TableHeaderComponentWithoutColumnDividers(
+        headerTableTitles = titles,
+        headerTitlesTextStyle = MaterialTheme.typography.bodySmall,
+        headerTitlesBackGroundColor = Color.White,
+        dividerThickness = 1.dp,
+        contentAlignment = Alignment.Center,
+        textAlign = TextAlign.Center,
+        tablePadding = 0.dp,
+        columnToIndexIncreaseWidth = null,
+    )
+}