`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