axui-datagrid

Install

npm install axui-datagrid

Run

git clone https://github.com/jsdevkr/axui-datagrid.git
cd axui-datagrid
npm i
npm start

Features

Large Data

Frozen row / col

Multi header

Loading

Row selector

Inline edit

Foot Summary

Props

data?: IData;

dataLength?: number;

columns: DataGridColumn[];

export interface IDataGridColumn extends ICol {
 colIndex?: number;
 rowIndex?: number;
 formatter?: formatterFunction | string;
 collector?: collectorFunction | string;
 editor?: editorFunction | string | { type?: string };
 hidden?: boolean;
 columns?: IDataGridColumn[];
 depth?: number;
 columnAttr?: string;
}

width: number = 400;

height: number = 400;

style?: any;

options?: DataGridOptions = defaultOptions;

status?: React.ReactNode;

static defaultColumnKeys: types.DataGridColumnKeys = {
 selected: '__selected__',
 modified: '__modified__',
 deleted: '__deleted__',
 disableSelection: '__disable_selection__',
};
static defaultHeader: types.DataGridOptionHeader = {
 display: true,
 align: 'left',
 columnHeight: 24,
 columnPadding: 3,
 columnBorderWidth: 1,
 selector: true,
 sortable: true,
 enableFilter: true,
 clickAction: 'sort',
};
static defaultBody: types.DataGridOptionBody = {
 align: 'left',
 columnHeight: 24,
 columnPadding: 3,
 columnBorderWidth: 1,
 grouping: false,
 mergeCells: false,
};
static defaultPage: types.DataGridOptionPage = {
 height: 20,
};
static defaultScroller: types.DataGridOptionScroller = {
 size: 14,
 arrowSize: 14,
 barMinSize: 12,
 padding: 3,
 disabledVerticalScroll: false,
};
static defaultOptions: types.DataGridOptions = {
 frozenColumnIndex: 0,
 frozenRowIndex: 0,
 showLineNumber: true,
 showRowSelector: false,
 multipleSelect: true,
 columnMinWidth: 100,
 lineNumberColumnWidth: 60,
 rowSelectorColumnWidth: 28,
 remoteSort: false,
 asidePanelWidth: 0,
 header: DataGrid.defaultHeader,
 body: DataGrid.defaultBody,
 page: DataGrid.defaultPage,
 scroller: DataGrid.defaultScroller,
 columnKeys: DataGrid.defaultColumnKeys,
 bodyLoaderHeight: 100,
};

onBeforeEvent?: ({e: React.MouseEvent | React.KeyboardEvent; eventName: string;}) => void;

onAfterEvent?: ({e: React.MouseEvent | React.KeyboardEvent; eventName: string;}) => void;

onScrollEnd?: ({endOfScrollTop?: boolean; endOfScrollLeft?: boolean;}) => void;

onRightClick?: ({e: React.MouseEvent; item: any; value: any; focusedRow?: number; focusedCol?: number;}) => void;

loading?: boolean = false;

loadingData?: boolean = false;

rowSelector?: IDataGridRowSelector;

 {
 show: boolean;
 rowKey: string;
 selectedRowKeys?: string[];
 onChange?: (param: IonChangeSelectedParam) => void;
}

Sample

import React, { FC, useState } from 'react';
import { DataGrid, IDataGrid } from 'axui-datagrid';
interface IProps {}
const DatagridExample: FC<IProps> = () => {
 const [width, setWidth] = useState(500);
 const [height, setHeight] = useState(250);
 const columns: IDataGrid.IColumn[] = [
 { key: '0', width: 60, label: 'ID', align: 'center' },
 {
 key: '1',
 width: 200,
 label: 'Title',
 formatter: function(args: any) {
 // console.log(args);
 return ' * ' + args.value;
 },
 },
 { key: '2', label: 'Writer', align: 'center', formatter: 'html' },
 { key: '0', label: 'Date', align: 'center', formatter: 'date' },
 { key: '1', label: 'Money', align: 'right', formatter: 'money' },
 ];
 const data = [
 { value: ['A01', 'B01', 'C'] },
 { value: ['A02', 'B02', 'C<b>a</b>'] },
 { value: ['A03', 'B03', 'C<b>a</b>'] },
 { value: ['A04', 'B04', 'C<b>a</b>'] },
 { value: ['A05', 'B05', 'C<b>a</b>'] },
 { value: ['A06', 'B06', 'C<b>a</b>'] },
 { value: ['A07', 'B07', 'C<b>a</b>'] },
 { value: ['A08', 'B08', 'C<b>a</b>'] },
 { value: ['A09', 'B09', 'C<b>a</b>'] },
 { value: ['A10', 'B10', 'C<b>a</b>'] },
 { value: ['A11', 'B11', 'C<b>a</b>'] },
 ];
 return (
 <div style={{ border: '1px solid #d9d9d9', width, height }}>
 <DataGrid
 width={width}
 height={height}
 style={{ fontSize: '12px' }}
 columns={columns}
 data={data}
 dataLength={data.length}
 options={{}}
 />
 </div>
 );
};
export default DatagridExample;

Version history