This is a Table Library.

Installation

1.Install the package via npm:

npm i @manishcodefire/custom-table

Code snippets:

2.Here's an example of how you can use the component

import React, {useState} from 'react';
import {ScrollView, StyleSheet} from 'react-native';
import {CustomTable} from '@manishcodefire/custom-table'

const Table = () => {
  const [column, setColumn] = useState(null);
  const [direction, setDirection] = useState('asc');
  const header = ['Header 1', 'Header 2', 'Header 3', 'Header 4'];
  const rows = [
    ['Boris', 'Zambia', 'Software', 'Sheqel'],
    ['Zennie', 'Oslo', 'Barbar', 'Afghani'],
    ['Sofia', 'Kemroon', 'Actor', 'Dollar'],
    ['Farman', 'Lusaka', 'Farmer', 'Pound'],
    ['Ken', 'Santiago', 'Driver', 'Rupee'],
    ['Arun', 'Argentina', 'Tester', 'Bhatt'],
    ['Tarun', 'Jakarta', 'Quality', 'Cedi'],
  ];

  return (
    <ScrollView style={styles.container}>
      <CustomTable
        header={header}
        rows={rows}
        sortColumn={column}
        sortDirection={direction}
        setSortDirection={setDirection}
        setSortColumn={setColumn}
        isSerialList={true}
        leftColumnWidth={70}
        cellMinWidth={100}
        cellMaxWidth={100}
        headerBg={'#ffffff'}
        leftColumnBg={'#ffffff'}
        headerTextColor={'#000000'}
        headerTextFontWeight={'600'}
        headerFontSize={15}
        headerBorderBottomWidth={1}
        headerBorderBottomColor={'#8e8e8e'}
        headerBorderRightColor={'#8e8e8e'}
        leftColumnTextColor={'#000000'}
        leftColumnFontSize={16}
        leftColumnFontWeight={'600'}
        cellTextColor={'#8e8e8e'}
        cellTexFontSize={12}
        cellFontWeight={'400'}
        tableBorderWidth={1}
        tableBorderColor={'#8e8e8e'}
        leftColumnBorderRightColor={'#8e8e8e'}
        cellBorderRightColor={'#8e8e8e'}
        cellBorderRightWidth={1}
        headerBorderRightWidth={1}
        leftColumnBorderRightWidth={1}
        rowsBorderBottomWidth={1}
        rowsBorderBottomColor={'#8e8e8e'}
      />
    </ScrollView>
  );
};

export default Table;
const styles = StyleSheet.create({
  container: {
    marginTop: 50,
    paddingHorizontal: 5,
  },
});

Props

| Props Name | Params | isRequire | Description | | -------------------------- | ------------ | --------- | ------------------------------------------------------------------- | | header | string[] | Yes | Array of header titles. | | rows | string[][] | Yes | Array of data rows, each row containing an array of cell values. | | sortColumn | Number | Yes | Index of the column used for sorting. | | sortDirection | String | Yes | Direction of sorting ('asc' for ascending, 'desc' for descending). | | setSortDirection | Function | Yes | Function to set the sorting direction. | | setSortColumn | Function | Yes | Function to set the sorting column. | | leftColumnWidth | Number | No | Width of the left most column. | | cellMinWidth | Number | No | Minimum width for each cell. | | cellMaxWidth | Number | No | Maximum width for each cell. | | headerBg | String | No | Background color for header row. | | leftColumnBg | String | No | Background color for left column cells. | | headerTextColor | String | No | Text color for header row. | | headerTextFontWeight | String | No | Font weight for header row text. | | headerFontSize | Number | No | Font size for header row text. | | leftColumnTextColor | String | No | Text color for left column cells. | | leftColumnFontWeight | String | No | Font weight for left column cell text. | | cellTextColor | String | No | Text color for data cells. | | cellTexFontSize | Number | No | Font size for data cell text. | | cellFontWeight | String | No | Font weight for data cell text. | | tableBorderWidth | Number | No | Border width for the entire table. | | tableBorderColor | String | No | Border color for the entire table. | | headerBorderBottomWidth | Number | No | Border bottom width for header row. | | headerBorderBottomColor | String | No | Border bottom color for header row. | | leftColumnBorderRightColor | String | No | Border right color for left column cells. | | leftColumnBorderRightWidth | Number | No | Border right width for left column cells. | | cellBorderRightColor | String | No | Border right color for data cells. | | cellBorderRightWidth | Number | No | Border right width for data cells. | | headerBorderRightColor | String | No | Border right color for header cells. | | headerBorderRightWidth | Number | No | Border right width for header cells. | | rowsBorderBottomWidth | Number | No | Border bottom width for data rows. | | rowsBorderBottomColor | String | No | Border bottom color for data rows. | | isSerialList | boolean | No | Flag to indicate if the leftmost column is a serial number list. |