57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import { Ionicons } from "@expo/vector-icons";
|
|
import { View } from "react-native";
|
|
import { DataTable, Text } from "react-native-paper";
|
|
|
|
import { TableSortDirection } from "@/constants/tableSortDirectionEnum";
|
|
|
|
interface SortableHeaderProps {
|
|
title: string;
|
|
column: string;
|
|
sortColumn: string | null;
|
|
sortDirection: TableSortDirection;
|
|
onSort: (column: string) => void;
|
|
centerAlign?: boolean;
|
|
style?: any;
|
|
}
|
|
|
|
export const SortableHeader = ({
|
|
title,
|
|
column,
|
|
sortColumn,
|
|
sortDirection,
|
|
onSort,
|
|
centerAlign = false,
|
|
style,
|
|
}: SortableHeaderProps) => {
|
|
return (
|
|
<DataTable.Title
|
|
style={{
|
|
justifyContent: centerAlign ? "center" : "flex-start",
|
|
...style,
|
|
}}
|
|
onPress={() => onSort(column)}
|
|
>
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: centerAlign ? "center" : "flex-start",
|
|
}}
|
|
>
|
|
<Text style={{ marginRight: 4, fontSize: 14 }}>
|
|
{sortColumn === column ? (
|
|
sortDirection === TableSortDirection.ASCENDING ? (
|
|
<Ionicons name="arrow-up" size={20} color="black" />
|
|
) : (
|
|
<Ionicons name="arrow-down" size={20} color="black" />
|
|
)
|
|
) : (
|
|
<Ionicons name="swap-vertical-outline" size={20} color="black" />
|
|
)}
|
|
</Text>
|
|
<Text>{title}</Text>
|
|
</View>
|
|
</DataTable.Title>
|
|
);
|
|
};
|