در این مقاله آموزش میدیم که چطوری یه جدول در کامپوز Jetpack Compose بسازیم ، که هم قابلیت اسکرول افقی داشته باشه، هم عمودی، و همه چیز با هم هماهنگ باشه. یه جور جدول حرفه‌ای که برای نمایش داده‌ها خیلی کاربردیه.

مواد لازم : ساخت جدول در کامپوز Jetpack Compose

برای ساخت جدول، قراره از کامپوننت‌های زیر استفاده کنیم:

• ScrollState: برای مدیریت اسکرول.
• Row: برای چینش افقی.
• LazyColumn: برای چینش عمودی و لیستی.

ویژگی‌های جدول در کامپوز : 

• هدر جدول (Header): اسکرول افقی داره.
• محتوای جدول (Content): قابلیت اسکرول هم افقی و هم عمودی.
• هماهنگی بین هدر و محتوا: وقتی هدر رو اسکرول می‌کنی، محتوا هم حرکت می‌کنه، و برعکس.

ساخت کامپوننت Header (هدر جدول)

اولین قدم، ساخت کامپوننتی برای هدر جدول در کامپوز عه. کد زیر رو برای این کار می نویسیم  :

    
@Composable
fun TableHeader(
    modifier: Modifier = Modifier,
    scrollState: ScrollState,
    headers: List<String>
) {
    Row(
        modifier = modifier
            .horizontalScroll(scrollState)
            .background(Color.Gray)
            .padding(8.dp)
    ) {
        headers.forEach { header ->
            Text(
                text = header,
                modifier = Modifier
                    .width(100.dp)
                    .padding(8.dp),
                color = Color.White,
                fontWeight = FontWeight.Bold
            )
        }
    }
}

توضیحات کد:

• از کامپوننت Row استفاده کردیم تا آیتم‌ها رو به صورت افقی نمایش بدیم.
• با horizontalScroll(scrollState) امکان اسکرول افقی رو ایجاد کردیم.
• یه لیست از هدرها (headers) داریم و با حلقه forEach اون‌ها رو یکی‌یکی داخل جدول می‌ذاریم.
• هر آیتم جدول با کامپوننت Text نمایش داده می‌شه.

ساخت کامپوننت Content (محتوای جدول)

حالا می‌خوایم داده‌های اصلی جدول رو به صورت عمودی و افقی اسکرول کنیم:

      
@Composable
fun TableContent(
    modifier: Modifier = Modifier,
    scrollState: ScrollState,
    data: List<List<String>>
) {
    LazyColumn(modifier = modifier.fillMaxSize()) {
        items(data) { row ->
            Row(modifier = Modifier.horizontalScroll(scrollState)) {
                row.forEach { cell ->
                    Text(
                        text = cell,
                        modifier = Modifier
                            .width(100.dp)
                            .padding(8.dp)
                    )
                }
            }
        }
    }
}

    
    

توضیحات کد:

• از کامپوننت LazyColumn استفاده کردیم که امکان اسکرول عمودی داده‌ها رو فراهم کنه.
• هر ردیف جدول با کامپوننت Row نمایش داده می‌شه که قابلیت اسکرول افقی داره.
• برای داده‌ها از لیست دو بعدی (List<List<String>>) استفاده می‌کنیم که هر لیست داخلی، یک ردیف جدوله.

ترکیب هدر و محتوا

حالا وقتشه که هدر و محتوای جدول در کامپز  رو توی یه کامپوننت واحد با هم ترکیب کنیم:

    
@Composable
fun ScrollableTable(modifier: Modifier, headers: List<String>, data: List<List<String>>) {
    val scrollState = rememberScrollState()

    Column(modifier = modifier.fillMaxSize()) {
        TableHeader(scrollState = scrollState, headers = headers)
        TableContent(scrollState = scrollState, data = data)
    }
}

نکته:

• از rememberScrollState استفاده کردیم تا اسکرول هدر و محتوا با هم هماهنگ باشن.
• هدر و محتوا رو توی یک Column قرار دادیم تا زیر هم نمایش داده بشن.

نمایش جدول در صفحه اصلی

حالا باید جدولمون رو توی صفحه اصلی نشون بدیم. برای این کار از داده‌های نمونه استفاده می‌کنیم:

kotlin

      
@Composable
fun PreviewScrollableTable(
    modifier: Modifier = Modifier
) {
    val headers = listOf("ID", "Name", "Age", "City", "Country", "Status")
    val data = List(25) { index ->
        listOf(
            (index + 1).toString(),
            "User $index",
            (20 + index).toString(),
            "City $index",
            "Country $index",
            if (index % 2 == 0) "Active" else "Inactive"
        )
    }

    ScrollableTable(modifier, headers, data)
}

    

توضیحات کد:

• لیست headers: شامل عنوان‌های ستون‌های جدول در کامپوز عه .
• لیست data: شامل داده‌های نمونه‌ای که توی جدول نمایش داده می‌شن.
• داده‌ها شامل اطلاعاتی مثل ID، اسم کاربر، سن، شهر، کشور و وضعیت (فعال یا غیرفعال) هستن.

جمع بندی و کل کامل :

برای اینکه همه چیز رو یکجا داشته باشی، این کد کامل جدوله:

kotlin

  
      
package com.nameisjayant.androidpractise.ui.compose

import androidx.compose.foundation.ScrollState
import androidx.compose.foundation.background
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp


@Composable
fun TableHeader(
    modifier: Modifier = Modifier,
    scrollState: ScrollState,
    headers: List<String>
) {
    Row(
        modifier = modifier
            .horizontalScroll(scrollState)
            .background(Color.Gray)
            .padding(8.dp)
    ) {
        headers.forEach { header ->
            Text(
                text = header,
                modifier = Modifier
                    .width(100.dp)
                    .padding(8.dp),
                color = Color.White,
                fontWeight = FontWeight.Bold
            )
        }
    }
}

@Composable
fun TableContent(
    modifier: Modifier = Modifier,
    scrollState: ScrollState,
    data: List<List<String>>
) {
    LazyColumn(modifier = modifier.fillMaxSize()) {
        items(data) { row ->
            Row(modifier = Modifier.horizontalScroll(scrollState)) {
                row.forEach { cell ->
                    Text(
                        text = cell,
                        modifier = Modifier
                            .width(100.dp)
                            .padding(8.dp)
                    )
                }
            }
        }
    }
}


@Composable
fun ScrollableTable(modifier: Modifier, headers: List<String>, data: List<List<String>>) {
    val scrollState = rememberScrollState()

    Column(modifier = modifier.fillMaxSize()) {

        TableHeader(scrollState = scrollState, headers = headers)
        TableContent(scrollState = scrollState, data = data)

    }
}

@Composable
fun PreviewScrollableTable(
    modifier: Modifier = Modifier
) {
    val headers = listOf("ID", "Name", "Age", "City", "Country", "Status")
    val data = List(25) { index ->
        listOf(
            (index + 1).toString(),
            "User $index",
            (20 + index).toString(),
            "City $index",
            "Country $index",
            if (index % 2 == 0) "Active" else "Inactive"
        )
    }

    ScrollableTable(modifier, headers, data)
}

    

با اجرای این کد، یه جدول حرفه‌ای و زیبا خواهی داشت که می‌تونی هم افقی و هم عمودی اسکرولش کنی. هدر و محتوا همیشه با هم هماهنگ هستن و تجربه کاربری خیلی خوبی رو فراهم می‌کنن.

امیدوارم که ، این آموزش جدول در کامپوز  براتون مفید واقعه بشه 🤗