@coligo/react-native-table
Version:
Lightweight package for creating flexible tables in React Native.
78 lines (77 loc) • 2.42 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Table = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _TableHeader = require("./TableHeader.js");
var _TableRow = require("./TableRow.js");
var _sorting = require("../utils/sorting.js");
var _HorizontalSeparator = require("./HorizontalSeparator.js");
var _jsxRuntime = require("react/jsx-runtime");
const Table = ({
data,
columns,
keyExtractor,
cellPadding,
sortingIcons,
borderStyle,
style,
stickyHeader,
headerBackground,
rowHeader,
rowFooter
}) => {
const [sortedData, setSortedData] = (0, _react.useState)(data);
const [sortConfig, setSortConfig] = (0, _react.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((0, _sorting.sortData)(sortedData, key, direction));
};
const renderSeparator = () => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HorizontalSeparator.HorizontalSeparator, {
borderStyle: borderStyle
});
};
(0, _react.useEffect)(() => {
setSortedData((0, _sorting.sortData)(data, sortConfig.key, sortConfig.direction));
}, [data, sortConfig]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: style,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
data: sortedData,
ListHeaderComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableHeader.TableHeader, {
columns: columns,
sortConfig: sortConfig,
cellPadding: cellPadding,
sortingIcons: sortingIcons,
borderStyle: borderStyle,
headerBackground: headerBackground,
onSort: handleSort
}),
stickyHeaderIndices: stickyHeader ? [0] : undefined,
renderItem: ({
item
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableRow.TableRow, {
item: item,
columns: columns,
cellPadding: cellPadding,
borderStyle: borderStyle,
rowHeader: rowHeader,
rowFooter: rowFooter
}),
ItemSeparatorComponent: renderSeparator,
keyExtractor: rowData => String(rowData[keyExtractor])
})
});
};
exports.Table = Table;
//# sourceMappingURL=Table.js.map