Skip to content

Commit 4efccf9

Browse files
Breens-MbakaBreens-Mbaka
authored
Merge pull request #13 from Breens-Mbaka/develop
Changes
2 parents aabc0db + ee72a78 commit 4efccf9

File tree

9 files changed

+571
-120
lines changed

9 files changed

+571
-120
lines changed

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

+78-28
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,23 @@
1515
*/
1616
package com.breens.beetablescompose
1717

18+
import androidx.compose.foundation.BorderStroke
1819
import androidx.compose.foundation.layout.Column
19-
import androidx.compose.foundation.rememberScrollState
2020
import androidx.compose.foundation.shape.RoundedCornerShape
21-
import androidx.compose.foundation.verticalScroll
22-
import androidx.compose.material3.Card
2321
import androidx.compose.material3.CardDefaults
2422
import androidx.compose.material3.MaterialTheme
23+
import androidx.compose.material3.OutlinedCard
2524
import androidx.compose.runtime.Composable
26-
import androidx.compose.ui.Modifier
27-
import androidx.compose.ui.draw.clip
25+
import androidx.compose.ui.Alignment
2826
import androidx.compose.ui.graphics.Color
2927
import androidx.compose.ui.text.TextStyle
28+
import androidx.compose.ui.text.style.TextAlign
3029
import androidx.compose.ui.unit.Dp
3130
import androidx.compose.ui.unit.dp
3231
import com.breens.beetablescompose.components.TableHeaderComponent
32+
import com.breens.beetablescompose.components.TableHeaderComponentWithoutColumnDividers
3333
import com.breens.beetablescompose.components.TableRowComponent
34+
import com.breens.beetablescompose.components.TableRowComponentWithoutDividers
3435
import com.breens.beetablescompose.utils.extractMembers
3536

3637
/**
@@ -49,37 +50,68 @@ import com.breens.beetablescompose.utils.extractMembers
4950
* @param rowTextStyle The text style to apply to the data cells in the table rows, by default it will be [MaterialTheme.typography.bodySmall].
5051
* @param tableElevation The elevation of the entire table (Card elevation) in DP, by default it will be "6.dp".
5152
* @param shape The shape of the table's corners, by default it will be "RoundedCornerShape(4.dp)".
53+
* @param disableVerticalDividers show or hide the vertical dividers between the table cells. If not set, by default the vertical dividers will be shown.
54+
* @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.
55+
* @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.
56+
* @param contentAlignment The alignment of the content in the table cells, by default it will be [Alignment.Center].
57+
* @param textAlign The alignment of the text in the table cells, by default it will be [TextAlign.Center].
5258
*/
5359
@Composable
5460
inline fun <reified T : Any> BeeTablesCompose(
5561
data: List<T>,
5662
enableTableHeaderTitles: Boolean = true,
5763
headerTableTitles: List<String>,
5864
headerTitlesBorderColor: Color = Color.LightGray,
59-
headerTitlesBorderWidth: Dp = 0.4.dp,
6065
headerTitlesTextStyle: TextStyle = MaterialTheme.typography.bodySmall,
6166
headerTitlesBackGroundColor: Color = Color.White,
6267
tableRowColors: List<Color> = listOf(Color.White, Color.White),
6368
rowBorderColor: Color = Color.LightGray,
64-
rowBorderWidth: Dp = 0.4.dp,
6569
rowTextStyle: TextStyle = MaterialTheme.typography.bodySmall,
66-
tableElevation: Dp = 6.dp,
70+
tableElevation: Dp = 0.dp,
6771
shape: RoundedCornerShape = RoundedCornerShape(4.dp),
72+
borderStroke: BorderStroke = BorderStroke(
73+
width = 1.dp,
74+
color = Color.LightGray,
75+
),
76+
disableVerticalDividers: Boolean = false,
77+
dividerThickness: Dp = 1.dp,
78+
horizontalDividerColor: Color = Color.LightGray,
79+
contentAlignment: Alignment = Alignment.Center,
80+
textAlign: TextAlign = TextAlign.Center,
81+
tablePadding: Dp = 0.dp,
82+
columnToIndexIncreaseWidth: Int? = null,
6883
) {
69-
Card(elevation = CardDefaults.cardElevation(defaultElevation = tableElevation)) {
70-
Column(
71-
modifier = Modifier
72-
.clip(shape = shape)
73-
.verticalScroll(rememberScrollState()),
74-
) {
84+
OutlinedCard(
85+
elevation = CardDefaults.cardElevation(defaultElevation = tableElevation),
86+
shape = shape,
87+
border = borderStroke,
88+
) {
89+
Column {
7590
if (enableTableHeaderTitles) {
76-
TableHeaderComponent(
77-
headerTableTitles = headerTableTitles,
78-
headerTitlesBorderColor = headerTitlesBorderColor,
79-
headerTitlesBorderWidth = headerTitlesBorderWidth,
80-
headerTitlesTextStyle = headerTitlesTextStyle,
81-
headerTitlesBackGroundColor = headerTitlesBackGroundColor,
82-
)
91+
if (disableVerticalDividers) {
92+
TableHeaderComponentWithoutColumnDividers(
93+
headerTableTitles = headerTableTitles,
94+
headerTitlesTextStyle = headerTitlesTextStyle,
95+
headerTitlesBackGroundColor = headerTitlesBackGroundColor,
96+
dividerThickness = dividerThickness,
97+
contentAlignment = contentAlignment,
98+
textAlign = textAlign,
99+
tablePadding = tablePadding,
100+
columnToIndexIncreaseWidth = columnToIndexIncreaseWidth,
101+
)
102+
} else {
103+
TableHeaderComponent(
104+
headerTableTitles = headerTableTitles,
105+
headerTitlesBorderColor = headerTitlesBorderColor,
106+
headerTitlesTextStyle = headerTitlesTextStyle,
107+
headerTitlesBackGroundColor = headerTitlesBackGroundColor,
108+
contentAlignment = contentAlignment,
109+
textAlign = textAlign,
110+
tablePadding = tablePadding,
111+
dividerThickness = dividerThickness,
112+
columnToIndexIncreaseWidth = columnToIndexIncreaseWidth,
113+
)
114+
}
83115
}
84116

85117
data.forEachIndexed { index, data ->
@@ -94,13 +126,31 @@ inline fun <reified T : Any> BeeTablesCompose(
94126
tableRowColors[1]
95127
}
96128

97-
TableRowComponent(
98-
data = rowData,
99-
rowBorderColor = rowBorderColor,
100-
rowBorderWidth = rowBorderWidth,
101-
rowTextStyle = rowTextStyle,
102-
rowBackGroundColor = tableRowBackgroundColor,
103-
)
129+
if (disableVerticalDividers) {
130+
TableRowComponentWithoutDividers(
131+
data = rowData,
132+
rowTextStyle = rowTextStyle,
133+
rowBackGroundColor = tableRowBackgroundColor,
134+
dividerThickness = dividerThickness,
135+
horizontalDividerColor = horizontalDividerColor,
136+
contentAlignment = contentAlignment,
137+
textAlign = textAlign,
138+
tablePadding = tablePadding,
139+
columnToIndexIncreaseWidth = columnToIndexIncreaseWidth,
140+
)
141+
} else {
142+
TableRowComponent(
143+
data = rowData,
144+
rowBorderColor = rowBorderColor,
145+
dividerThickness = dividerThickness,
146+
rowTextStyle = rowTextStyle,
147+
rowBackGroundColor = tableRowBackgroundColor,
148+
contentAlignment = contentAlignment,
149+
textAlign = textAlign,
150+
tablePadding = tablePadding,
151+
columnToIndexIncreaseWidth = columnToIndexIncreaseWidth,
152+
)
153+
}
104154
}
105155
}
106156
}

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

+25-36
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import androidx.compose.foundation.layout.Box
2121
import androidx.compose.foundation.layout.Row
2222
import androidx.compose.foundation.layout.fillMaxWidth
2323
import androidx.compose.foundation.layout.height
24+
import androidx.compose.foundation.layout.padding
2425
import androidx.compose.foundation.layout.wrapContentHeight
2526
import androidx.compose.material3.MaterialTheme
2627
import androidx.compose.material3.Text
@@ -39,24 +40,30 @@ import androidx.compose.ui.unit.dp
3940
fun TableHeaderComponent(
4041
headerTableTitles: List<String>,
4142
headerTitlesBorderColor: Color,
42-
headerTitlesBorderWidth: Dp,
4343
headerTitlesTextStyle: TextStyle,
4444
headerTitlesBackGroundColor: Color,
45+
contentAlignment: Alignment,
46+
textAlign: TextAlign,
47+
tablePadding: Dp,
48+
columnToIndexIncreaseWidth: Int?,
49+
dividerThickness: Dp,
4550
) {
4651
Row(
4752
Modifier
4853
.fillMaxWidth()
49-
.background(headerTitlesBackGroundColor),
54+
.background(headerTitlesBackGroundColor)
55+
.padding(horizontal = tablePadding),
5056
) {
51-
headerTableTitles.forEach { title ->
57+
headerTableTitles.forEachIndexed { index, title ->
58+
val weight = if (index == columnToIndexIncreaseWidth) 8f else 2f
5259
Box(
5360
modifier = Modifier
54-
.weight(.3f)
61+
.weight(weight)
5562
.border(
56-
width = headerTitlesBorderWidth,
63+
width = dividerThickness,
5764
color = headerTitlesBorderColor,
5865
),
59-
contentAlignment = Alignment.Center,
66+
contentAlignment = contentAlignment,
6067
) {
6168
Text(
6269
text = title,
@@ -65,7 +72,7 @@ fun TableHeaderComponent(
6572
modifier = Modifier
6673
.height(38.dp)
6774
.wrapContentHeight(),
68-
textAlign = TextAlign.Center,
75+
textAlign = textAlign,
6976
)
7077
}
7178
}
@@ -76,33 +83,15 @@ fun TableHeaderComponent(
7683
@Preview(showBackground = true)
7784
fun TableHeaderComponentPreview() {
7885
val titles = listOf("Team", "Home", "Away", "Points")
79-
80-
Row(
81-
Modifier
82-
.fillMaxWidth()
83-
.background(Color.White),
84-
) {
85-
titles.forEach { title ->
86-
Box(
87-
modifier = Modifier
88-
.weight(.3f)
89-
.border(
90-
width = 0.4.dp,
91-
color = Color.LightGray,
92-
),
93-
contentAlignment = Alignment.Center,
94-
) {
95-
Text(
96-
text = title,
97-
style = MaterialTheme.typography.bodySmall,
98-
color = Color.Black,
99-
overflow = TextOverflow.Ellipsis,
100-
modifier = Modifier
101-
.height(38.dp)
102-
.wrapContentHeight(),
103-
textAlign = TextAlign.Center,
104-
)
105-
}
106-
}
107-
}
86+
TableHeaderComponent(
87+
headerTableTitles = titles,
88+
headerTitlesBorderColor = Color.Black,
89+
headerTitlesTextStyle = MaterialTheme.typography.labelMedium,
90+
headerTitlesBackGroundColor = Color.LightGray,
91+
contentAlignment = Alignment.Center,
92+
textAlign = TextAlign.Center,
93+
tablePadding = 0.dp,
94+
columnToIndexIncreaseWidth = null,
95+
dividerThickness = 1.dp,
96+
)
10897
}

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

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/*
2+
* Copyright 2023 Breens Mbaka
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
package com.breens.beetablescompose.components
17+
18+
import androidx.compose.foundation.background
19+
import androidx.compose.foundation.layout.Box
20+
import androidx.compose.foundation.layout.Column
21+
import androidx.compose.foundation.layout.Row
22+
import androidx.compose.foundation.layout.fillMaxWidth
23+
import androidx.compose.foundation.layout.height
24+
import androidx.compose.foundation.layout.padding
25+
import androidx.compose.foundation.layout.wrapContentHeight
26+
import androidx.compose.material3.Divider
27+
import androidx.compose.material3.MaterialTheme
28+
import androidx.compose.material3.Text
29+
import androidx.compose.runtime.Composable
30+
import androidx.compose.ui.Alignment
31+
import androidx.compose.ui.Modifier
32+
import androidx.compose.ui.graphics.Color
33+
import androidx.compose.ui.text.TextStyle
34+
import androidx.compose.ui.text.style.TextAlign
35+
import androidx.compose.ui.text.style.TextOverflow
36+
import androidx.compose.ui.tooling.preview.Preview
37+
import androidx.compose.ui.unit.Dp
38+
import androidx.compose.ui.unit.dp
39+
40+
@Composable
41+
fun TableHeaderComponentWithoutColumnDividers(
42+
headerTableTitles: List<String>,
43+
headerTitlesTextStyle: TextStyle,
44+
headerTitlesBackGroundColor: Color,
45+
dividerThickness: Dp,
46+
contentAlignment: Alignment,
47+
textAlign: TextAlign,
48+
tablePadding: Dp,
49+
columnToIndexIncreaseWidth: Int?,
50+
) {
51+
Column {
52+
Row(
53+
Modifier
54+
.fillMaxWidth()
55+
.background(headerTitlesBackGroundColor)
56+
.padding(horizontal = tablePadding),
57+
) {
58+
headerTableTitles.forEachIndexed { index, title ->
59+
val weight = if (index == columnToIndexIncreaseWidth) 8f else 2f
60+
Box(
61+
modifier = Modifier
62+
.weight(weight),
63+
contentAlignment = contentAlignment,
64+
) {
65+
Text(
66+
text = title,
67+
style = headerTitlesTextStyle,
68+
overflow = TextOverflow.Ellipsis,
69+
modifier = Modifier
70+
.height(38.dp)
71+
.wrapContentHeight(),
72+
textAlign = textAlign,
73+
)
74+
}
75+
}
76+
}
77+
Divider(
78+
modifier = Modifier
79+
.fillMaxWidth()
80+
.height(dividerThickness)
81+
.background(headerTitlesBackGroundColor),
82+
)
83+
}
84+
}
85+
86+
@Composable
87+
@Preview(showBackground = true)
88+
fun TableHeaderComponentWithoutColumnDividersPreview() {
89+
val titles = listOf("Team", "Home", "Away", "Points")
90+
91+
TableHeaderComponentWithoutColumnDividers(
92+
headerTableTitles = titles,
93+
headerTitlesTextStyle = MaterialTheme.typography.bodySmall,
94+
headerTitlesBackGroundColor = Color.White,
95+
dividerThickness = 1.dp,
96+
contentAlignment = Alignment.Center,
97+
textAlign = TextAlign.Center,
98+
tablePadding = 0.dp,
99+
columnToIndexIncreaseWidth = null,
100+
)
101+
}

0 commit comments

Comments
 (0)