table static method

Widget table({
  1. Key? key,
  2. int rows = 5,
  3. int columns = 4,
  4. double rowHeight = 44.0,
  5. bool hasHeader = true,
  6. Color? color,
  7. Color? highlightColor,
  8. Duration duration = const Duration(milliseconds: 1500),
  9. bool loading = true,
})

Creates a tabular data grid skeleton.

Implementation

static Widget table({
  Key? key,
  int rows = 5,
  int columns = 4,
  double rowHeight = 44.0,
  bool hasHeader = true,
  Color? color,
  Color? highlightColor,
  Duration duration = const Duration(milliseconds: 1500),
  bool loading = true,
}) {
  if (!loading) return const SizedBox.shrink();

  return Column(
    key: key,
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      if (hasHeader)
        Container(
          height: rowHeight * 0.9,
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: Row(
            children: List.generate(columns, (colIndex) {
              return Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(right: 16.0),
                  child: TSkeleton.text(
                    height: 14.0,
                    borderRadius: BorderRadius.circular(4.0),
                    color: color,
                    highlightColor: highlightColor,
                    duration: duration,
                  ),
                ),
              );
            }),
          ),
        ),
      if (hasHeader) const Divider(height: 1.0, thickness: 1.0),
      ...List.generate(rows, (rowIndex) {
        return Container(
          height: rowHeight,
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(
                color: (color ?? Colors.grey).withValues(alpha: 0.1),
                width: 1.0,
              ),
            ),
          ),
          child: Row(
            children: List.generate(columns, (colIndex) {
              // Vary line widths slightly for realism
              final widthFactor = (colIndex == 0) ? 0.75 : ((colIndex % 2 == 0) ? 0.55 : 0.85);
              return Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(right: 16.0),
                  child: FractionallySizedBox(
                    alignment: Alignment.centerLeft,
                    widthFactor: widthFactor,
                    child: TSkeleton.text(
                      height: 12.0,
                      color: color,
                      highlightColor: highlightColor,
                      duration: duration,
                    ),
                  ),
                ),
              );
            }),
          ),
        );
      }),
    ],
  );
}