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

Lightweight package for creating flexible tables in React Native.

"use strict";

import { useEffect, useState } from 'react';
import { View, FlatList } from 'react-native';
import { TableHeader } from "./TableHeader.js";
import { TableRow } from "./TableRow.js";
import { sortData } from "../utils/sorting.js";
import { HorizontalSeparator } from "./HorizontalSeparator.js";
import { jsx as _jsx } from "react/jsx-runtime";
export const Table = ({
  data,
  columns,
  keyExtractor,
  cellPadding,
  sortingIcons,
  borderStyle,
  style,
  stickyHeader,
  headerBackground,
  rowHeader,
  rowFooter
}) => {
  const [sortedData, setSortedData] = useState(data);
  const [sortConfig, setSortConfig] = useState({
    key: columns.find(c => c.sortable)?.key ?? null,
    direction: 'desc'
  });
  const handleSort = key => {
    const direction = sortConfig.key === key && sortConfig.direction === 'asc' ? 'desc' : 'asc';
    setSortConfig({
      key,
      direction
    });
    setSortedData(sortData(sortedData, key, direction));
  };
  const renderSeparator = () => {
    return /*#__PURE__*/_jsx(HorizontalSeparator, {
      borderStyle: borderStyle
    });
  };
  useEffect(() => {
    setSortedData(sortData(data, sortConfig.key, sortConfig.direction));
  }, [data, sortConfig]);
  return /*#__PURE__*/_jsx(View, {
    style: style,
    children: /*#__PURE__*/_jsx(FlatList, {
      data: sortedData,
      ListHeaderComponent: /*#__PURE__*/_jsx(TableHeader, {
        columns: columns,
        sortConfig: sortConfig,
        cellPadding: cellPadding,
        sortingIcons: sortingIcons,
        borderStyle: borderStyle,
        headerBackground: headerBackground,
        onSort: handleSort
      }),
      stickyHeaderIndices: stickyHeader ? [0] : undefined,
      renderItem: ({
        item
      }) => /*#__PURE__*/_jsx(TableRow, {
        item: item,
        columns: columns,
        cellPadding: cellPadding,
        borderStyle: borderStyle,
        rowHeader: rowHeader,
        rowFooter: rowFooter
      }),
      ItemSeparatorComponent: renderSeparator,
      keyExtractor: rowData => String(rowData[keyExtractor])
    })
  });
};
//# sourceMappingURL=Table.js.map