react-native-dynamic-table-component/src/styles.js

A customizable and dynamic table component for React Native that supports flexible layouts, dynamic column rendering, and user interactions such as sorting and filter.

import { StyleSheet, Dimensions } from "react-native";

const {width: SCREEN_WIDTH} = Dimensions.get('window');

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 10,
    backgroundColor: '#f5f5f5',
  },
  header: {
    flexDirection: 'row',
    marginBottom: 16,
    alignItems: 'center',
    justifyContent:'flex-end',
    paddingHorizontal: 15
  },
  searchContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 8,
    marginRight: 8,
  },
  searchIcon: {
    fontSize: 16,
    color: '#666',
    marginRight: 4,
  },
  searchInput: {
    flex: 1,
    fontSize: 16,
    padding: 4,
  },
  sortButton: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 10,
    marginRight: 8,
    borderWidth: 1,
    borderColor: '#e0e0e0',
  },
  sortButtonText: {
    marginRight: 4,
    fontSize: 16,
  },
  iconText: {
    fontSize: 12,
  },
  filterButton: {
    backgroundColor: '#5C6B73',
    borderRadius: 8,
    padding: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  filterButtonText: {
    color: '#fff',
    fontSize: 16,
  },
  tableContainer: {
    borderRadius: 8,
    overflow: 'hidden',
  },
  headerRow: {
    flexDirection: 'row',
    height: 50,
    backgroundColor: '#fff',
    alignItems: 'center',
    paddingVertical: 8,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 1,
    zIndex: 10,
  },
  headerCell: {
    padding: 16,
    paddingVertical: 12,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: 50,
  },
  headerText: {
    fontWeight: 'bold',
    fontSize: 16,
    flex: 1,
  },
  row: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
    height: 50,
  },
  cell: {
    padding: 16,
    fontSize: 16,
    textAlignVertical: 'center',
    height: 50,
  },
  emptyState: {
    width: SCREEN_WIDTH - 32,
    padding: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  emptyStateText: {
    fontSize: 16,
    color: '#666',
  },
  modalOverlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modalContent: {
    width: '90%',
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 16,
    maxHeight: '80%',
  },
  modalHeader: {
    marginBottom: 16,
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 12,
  },
  tabsContainer: {
    flexDirection: 'row',
    marginBottom: 8,
  },
  tabButton: {
    paddingVertical: 8,
    paddingHorizontal: 16,
    marginRight: 8,
    borderRadius: 16,
    backgroundColor: '#f0f0f0',
  },
  activeTabButton: {
    backgroundColor: '#5C6B73',
  },
  activeTabText: {
    color: '#fff',
  },
  filterContent: {
    marginBottom: 16,
  },
  filterLabel: {
    fontSize: 16,
    marginBottom: 8,
  },
  rangeFilterContainer: {
    marginBottom: 16,
  },
  rangeInputs: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  rangeInput: {
    width: 80,
    padding: 8,
    borderWidth: 1,
    borderColor: '#e0e0e0',
    borderRadius: 4,
  },
  optionsFilterContainer: {
    marginBottom: 16,
  },
  optionsList: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  optionButton: {
    padding: 8,
    margin: 4,
    borderWidth: 1,
    borderColor: '#e0e0e0',
    borderRadius: 4,
    maxWidth: '47%',
  },
  optionText: {
    maxWidth: 120,
  },
  selectedOption: {
    backgroundColor: '#5C6B73',
    borderColor: '#5C6B73',
  },
  selectedOptionText: {
    color: '#fff',
  },
  modalButtons: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
  modalButton: {
    padding: 10,
    marginLeft: 8,
    borderRadius: 4,
    borderWidth: 1,
    borderColor: '#e0e0e0',
  },
  applyButton: {
    backgroundColor: '#5C6B73',
    borderColor: '#5C6B73',
  },
  applyButtonText: {
    color: 'black',
  },
});