@lotics/ui 1.14.0 → 1.16.0

package/src/table.tsx

@@ -1,19 +1,40 @@
-import { ScrollView, View, ViewStyle, StyleSheet } from "react-native";
+import { Pressable, ScrollView, View, ViewStyle, StyleSheet } from "react-native";
 import { Text } from "@lotics/ui/text";
 import { ReactNode } from "react";
 import { colors } from "@lotics/ui/colors";
 
+export type SortDir = "asc" | "desc";
+export interface TableSort<TRow extends Record<string, unknown>> {
+  key: keyof TRow;
+  dir: SortDir;
+}
+
 interface TableProps<TRow extends Record<string, unknown>> {
   columns: Column<TRow>[];
   rows: (TRow | null | false)[];
   rowKey?: keyof TRow;
   rowStyle?: (row: TRow) => ViewStyle | undefined;
+  /** Current sort. Pair with `onSortChange` to render sortable headers. The
+   *  parent owns the actual sorting of `rows` — this only drives the indicator. */
+  sort?: TableSort<TRow> | null;
+  /** Pressing a `sortable` header calls this with the column key (the parent
+   *  toggles asc/desc and re-sorts `rows`). */
+  onSortChange?: (key: keyof TRow) => void;
+  /** Pressing a row calls this — e.g. to open a detail drilldown. The row
+   *  becomes a Pressable with a hover/press surface. Interactive cells nested
+   *  inside (Pressables/buttons) capture their own press and don't bubble. */
+  onRowPress?: (row: TRow) => void;
 }
 
 interface Column<TRow extends Record<string, unknown>> {
   key: keyof TRow;
   label: string;
   width?: number;
+  /** Horizontal alignment of header + cell content. Default "left". */
+  align?: "left" | "right";
+  /** When true (and `onSortChange` is set), the header is pressable + shows a
+   *  sort arrow when this column is the active `sort`. */
+  sortable?: boolean;
   renderCell?: RenderCell<TRow>;
 }
 
@@ -25,48 +46,80 @@ type RenderCell<TRow extends Record<string, unknown>> = (params: {
 const stickyHeader = [0];
 
 export function Table<TRow extends Record<string, unknown>>(props: TableProps<TRow>) {
-  const { columns, rows, rowKey, rowStyle } = props;
+  const { columns, rows, rowKey, rowStyle, sort, onSortChange, onRowPress } = props;
 
   return (
     <ScrollView style={styles.container} stickyHeaderIndices={stickyHeader}>
       <View style={styles.headerRow}>
-        {columns.map((column) => (
+        {columns.map((column) => {
+          const sortable = column.sortable && !!onSortChange;
+          const active = sort?.key === column.key;
+          const cellStyle = [
+            column.width ? { width: column.width } : styles.flexColumn,
+            styles.headerCell,
+            column.align === "right" ? styles.alignEnd : null,
+          ];
+          const inner = (
+            <View style={styles.headerInner}>
+              <Text weight="medium" numberOfLines={1} userSelect="none">
+                {column.label}
+              </Text>
+              {sortable ? (
+                <Text size="xs" color="muted" userSelect="none">
+                  {active ? (sort?.dir === "asc" ? "↑" : "↓") : "↕"}
+                </Text>
+              ) : null}
+            </View>
+          );
+          return sortable ? (
+            <Pressable
+              key={column.key as string}
+              accessibilityRole="button"
+              accessibilityLabel={`Sắp xếp theo ${column.label}`}
+              onPress={() => onSortChange?.(column.key)}
+              style={cellStyle}
+            >
+              {inner}
+            </Pressable>
+          ) : (
+            <View key={column.key as string} style={cellStyle}>
+              {inner}
+            </View>
+          );
+        })}
+      </View>
+      {rows.filter(Boolean).map((r, i) => {
+        const row = r as TRow;
+        const extraStyle = rowStyle?.(row);
+        const cells = columns.map((column) => (
           <View
+            key={column.key as string}
             style={[
               column.width ? { width: column.width } : styles.flexColumn,
-              styles.headerCell,
+              styles.bodyCell,
+              column.align === "right" ? styles.alignEnd : null,
             ]}
-            key={column.key as string}
           >
-            <Text weight="medium" numberOfLines={1} userSelect="none">
-              {column.label}
-            </Text>
+            {column.renderCell ? (
+              column.renderCell({ row, column })
+            ) : (
+              <Text numberOfLines={1}>{row[column.key]?.toString()}</Text>
+            )}
           </View>
-        ))}
-      </View>
-      {rows.filter(Boolean).map((r, i) => {
-        const row = r as TRow;
-        const extraStyle = rowStyle?.(row);
-        return (
-          <View
-            key={rowKey ? String(row[rowKey]) : i}
-            style={[styles.bodyRow, extraStyle]}
+        ));
+        const key = rowKey ? String(row[rowKey]) : i;
+        return onRowPress ? (
+          <Pressable
+            key={key}
+            accessibilityRole="button"
+            onPress={() => onRowPress(row)}
+            style={({ pressed }) => [styles.bodyRow, pressed ? styles.rowPressed : null, extraStyle]}
           >
-            {columns.map((column) => (
-              <View
-                key={column.key as string}
-                style={[
-                  column.width ? { width: column.width } : styles.flexColumn,
-                  styles.bodyCell,
-                ]}
-              >
-                {column.renderCell ? (
-                  column.renderCell({ row, column })
-                ) : (
-                  <Text numberOfLines={1}>{row[column.key]?.toString()}</Text>
-                )}
-              </View>
-            ))}
+            {cells}
+          </Pressable>
+        ) : (
+          <View key={key} style={[styles.bodyRow, extraStyle]}>
+            {cells}
           </View>
         );
       })}
@@ -86,19 +139,35 @@ const styles = StyleSheet.create({
     backgroundColor: colors.zinc[50],
   },
   headerCell: {
-    height: 44,
+    minHeight: 40,
     justifyContent: "center",
-    paddingHorizontal: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
   },
-bodyRow: {
+  headerInner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+  },
+  bodyRow: {
     flexDirection: "row",
     borderBottomWidth: 1,
     borderBottomColor: colors.border,
+    alignItems: "stretch",
+  },
+  rowPressed: {
+    backgroundColor: colors.zinc[50],
   },
+  // No fixed height — the row sizes to its content + vertical padding, so rich
+  // cells (avatar chips, buttons, stacked badges) get room instead of squeezing.
   bodyCell: {
     minHeight: 44,
     justifyContent: "center",
-    paddingHorizontal: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+  },
+  alignEnd: {
+    alignItems: "flex-end",
   },
   flexColumn: {
     flex: 1,