@coligo/react-native-table/lib/module/components/TableHeader.js

Lightweight package for creating flexible tables in React Native.

"use strict";

import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const TableHeader = ({
  columns,
  sortConfig,
  cellPadding,
  sortingIcons,
  borderStyle,
  headerBackground = 'white',
  onSort
}) => {
  const seenKeys = new Set();
  columns.forEach(column => {
    const identifier = column.id ?? String(column.key);
    if (seenKeys.has(identifier)) {
      throw new Error(`Duplicate column identifier detected for key "${String(column.key)}". Ensure each column has a unique id or key.`);
    }
    seenKeys.add(identifier);
  });
  return /*#__PURE__*/_jsx(View, {
    style: [styles.row, {
      backgroundColor: headerBackground
    }],
    children: columns.map((column, index) => /*#__PURE__*/_jsx(View, {
      style: [{
        ...cellPadding
      }, column.width ? {
        width: column.width
      } : {
        flex: column.flex ?? 1
      }, {
        borderColor: borderStyle?.borderColor ?? 'black'
      }, borderStyle?.showVertical && columns.length - 1 !== index ? {
        borderRightWidth: borderStyle.borderWidth ?? 1
      } : undefined, borderStyle?.showHorizontalHeader ? {
        borderBottomWidth: borderStyle.borderWidth ?? 1
      } : undefined],
      children: /*#__PURE__*/_jsxs(TouchableOpacity, {
        onPress: () => column.sortable && onSort(column.key),
        style: [styles.row],
        disabled: !column.sortable,
        children: [column.header ? column.header(column.label) : /*#__PURE__*/_jsx(Text, {
          style: styles.text,
          children: column.label
        }), column.sortable && sortConfig.key === column.key ? sortingIcons ? sortConfig.direction === 'asc' ? sortingIcons.asc : sortingIcons.desc : /*#__PURE__*/_jsx(Text, {
          style: [styles.text, styles.sorting],
          children: sortConfig.direction === 'asc' ? '↑' : '↓'
        }) : null]
      })
    }, column.id ?? String(column.key)))
  });
};
const styles = StyleSheet.create({
  row: {
    flexDirection: 'row'
  },
  text: {
    fontWeight: 'bold'
  },
  sorting: {
    marginLeft: 3
  }
});
//# sourceMappingURL=TableHeader.js.map