rn-fully-responsive-table

Fully responsive and customizable react native table-grid components

Getting started

Install the library using either Yarn:

yarn add rn-fully-responsive-table

or npm:

npm install rn-fully-responsive-table

If you have multiple header, your header value should be same with given data properties key for each column.

Usage

import { ResponsiveTable } from 'rn-fully-responsive-table';
// ...

const multiHeader = ['Numbers', 'Words'];
const multiHeaderData = [
  { Numbers: 1, Words: '11' },
  { Numbers: 2, Words: '22' },
  { Numbers: 2, Words: '22' },
];
// ...

<ResponsiveTable columnsCustomization={multiHeader} dataSource={multiHeaderData} />

// ...

Screen Shots

Types

Some properties have multiple types. Properties marked with an asterisk (*) are required.

| Name | Type | Description | |--------|---------|-------------| | tableHeight * | number | Height of the table. | | columnsCustomization* | string[] or columnProperties | If you want customize the table with color or width, you need the use columnProperties object. | | dataSource * | array | Data of the table | | containerStyle | ViewStyle | Style of the main container. | | renderOnlyItems| boolean | Show the table's header area or not. Default is true. | | tableWidthMultiplier | number (0.1 to 1) | Width of the table. (Value will multiplier with device width). | | colorPalet | [ColorValue, ColorValue?] | Colors palet to use different color on the table. First color will be used for id == 0 and second color will be used for id == 1, if you want use only one color, you can write one color to color array. Like ["red"] | | headerWrapperStyle | ViewStyle | Header Container styles. | | headerTextStyle | HeaderTextStyle | Header texts styles. | | inlineItemStyle | InlineItemStyle | Values text styles |

type columnProperties = {
  header: string;
  width: number;
  valueColor?: ColorValue; // colums value's color.
};

type BorderStyle = {
  borderWidth?: number;
  borderColor?: string;
  borderStyle?: string;
};

type HeaderTextStyle = {
  fontSize?: number;
  fontWeight?: 'bold' | '100' | '200' | '400' | '800';
  color?: ColorValue;
  textAlign?: 'center' | 'left' | 'right';
  padding?: number;
  paddingTop?: number;
  paddingLeft?: number;
  paddingBottom?: number;
  paddingRight?: number;
  borderRadius?: number;
  borderWidth?: number;
  borderColor?: ColorValue;
};

type InlineItemStyle = HeaderTextStyle & BorderStyle;

Sample Tables

SingleHeader Table

const singleHeader = ['Numbers'];
const singleHeaderData = ['1', '2', '3'];

MultiHaderTable =![Alt text](ss/MultiHeader.png)
Sample Data = 
const multiHeader = ['Numbers', 'Words'];
const multiHeaderData = [
  { Numbers: 1, Words: '11' },
  { Numbers: 2, Words: '22' },
  { Numbers: 2, Words: '22' },
];

CustomizedMultiHeader

const customizedMultiHeader = [
  { header: 'Numbers', width: 2, valueColor: 'red' },
  { header: 'Words', width: 3, valueColor: 'blue' },
  { header: 'Test', width: 2.5 },
  { header: 'Test2', width: 2.5, valueColor: 'green' },
];

const customizedMultiHeaderItem = [
  { Numbers: 10, Words: '10', Test: '21', Test2: '8' },
  { Numbers: 20, Words: '20', Test: '22', Test2: '9' },
  { Numbers: 30, Words: '20', Test: '23', Test2: '10' },
  { Numbers: 40, Words: '20', Test: '24', Test2: '11' },
  { Numbers: 50, Words: '50', Test: '25', Test2: '12' },
];

Another Examples

You can customize header background, text color, inline items text color and background for grids.

<ResponsiveTable
 headerWrapperStyle={{ backgroundColor: 'white' }}
 inlineItemStyle={{ color: 'white' }}
 headerTextStyle={{ color: 'black' }}
 colorPalet={['gray', 'green']}
 columnsCustomization={multiHeader}
 dataSource={multiHeaderData}
/>

You can give table a height. Scrollview is already included the package. You can scroll the bottom.

<ResponsiveTable 
 tableHeight={120} 
 columnsCustomization={customizedMultiHeader} 
 dataSource={customizedMultiHeaderItem} 
/>

Author: https://www.linkedin.com/in/atakan-atabeyoglu/

License

MIT

Made with create-react-native-library