React Native Data Table Conmponent

Data Tables makes working and creating crude applications in react native very easy. It provide Table component with search capabilities, editor included, pagination and insight into the total records filters and selections. It simple editor allow you/ your users to easily add, edit or delete records. It support JSON Array data, server served json, or processed data from the server.

Installation

npm install kanneh-datatable

Usage

<DataTable 
    columns={
        tableColumns
    } 
    data={
        tableData
    }
    ......
/>

Properties

DataTableProps

{
    columns?: DataTableColumnProps[];
    data?: any[];
    ajax?: AjaxProp,
    height?: number;
    loading?: boolean;
    error?: string; 
    buttons?: ButtonProps[];
    allowAdd?: boolean;
    onBeforeAdd?: (item:any)=>any;
    onAdd?: (item:any)=>any;
    select?: boolean;
    serverSide?:boolean;
    allowEdit?: boolean;
    onBeforeEdit?: (item: any) => any;
    onEdit?: (item: any) => void
    allowDelete?: boolean;
    onBeforeDelete?: (item: any) => boolean;
    onDelete?: (item: any) => void;
    options?: Record<string, any>
}

columns

The columns for the tables see DataTableColumnProps

data

JSON array Data

ajax

parameters to connect to server for json data or for processing see AjaxProp

height

Height of the table body

loading

external variable that signal to the table to wait for params

error

external error to be displayed by the table

buttons

Buttons that will appear on the table in addition to internal buttons see ButtonProps

allowAdd

triggers editor and add internal button for adding records

onBeforeAdd

callback called before adding item to table. it returns edited version of the item which is finnaly added to the data table's data or before sent to server.

onAdd

callback called after adding the item to data tables data or after submission to server

select

Boolean controls row selections

serverSide

Boolean informs data table that all process should be sent to server

DataTableColumnProps

column definition

{
    data: string;
    title?: string;
    align?: 'left' | 'right' | 'center';
    render?: (item: any,row: any[], renderType:string)=>ReactNode
    type?: 'string' | 'number' | 'date' | 'dropdown' | 'grid';
    sortable?: boolean;
    addable?: boolean;
    editable?: boolean;
    editor?: (item:any, valueChange:(value:any)=>void)=>ReactNode;
    searchable?: boolean;
    options?: {label?:string,value:any}[];
    multiple?: boolean;
}

AjaxProp

export interface AjaxProp {
    url: string,
    headers?: any,
    params?: any 
}

ButtonProps extends ViewProps

{
    text?: string;
    action: (event:any,api:Api) => void;
    disabled?: boolean
}