@manishcodefire/custom-table

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.