@gpa-gemstone/react-table

react-table

The Gemstone Web Library organizes all Gemstone functionality related to web.

This library includes helpful npm package component for creating strongly typed tables in react.

Usage Table

    interface iType = { Field1: string, Field2: number, Field3: boolean, Field4: string, Field5: string}
    let records:iType[] = [{Field1: 'Hello', Field2: 1, Field3: false, Field4: 'alot of text blah blah blah', Field5: '01/01/2021'}]
    let ascending: boolean = true;

    <Table<iType>
    cols={[
        { key: 'Field1', label: 'Field1' },
        { key: 'Field2', label: 'Field2', content: (item, key, style) => item[key] },
        { key: 'Field3', label: 'Field3' },
        { key: 'Field4', label: 'Field4' },
        { key: 'Field5', label: 'Field5' },
    ]}
    tableClass="table table-hover"
    theadStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%', height: 50 }}
    tbodyStyle={{ display: 'block', overflowY: 'scroll', width: '100%' }}
    rowStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }}
    sortField={''}
    onClick={() => { }}
    onSort={() => { }}
    data={records}
    ascending={ascending}
        />

Usage SelectTable

    interface iType = { Field1: string, Field2: number, Field3: boolean, Field4: string, Field5: string}
    let records:iType[] = [{Field1: 'Hello', Field2: 1, Field3: false, Field4: 'alot of text blah blah blah', Field5: '01/01/2021'}]
    let ascending: boolean = true;
	let selectedItems: iType[] = [];
	
    <SelectTable<iType>
    cols={[
        { key: 'Field1', label: 'Field1' },
        { key: 'Field2', label: 'Field2', content: (item, key, style) => item[key] },
        { key: 'Field3', label: 'Field3' },
        { key: 'Field4', label: 'Field4' },
        { key: 'Field5', label: 'Field5' },
    ]}
    tableClass="table table-hover"
    theadStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%', height: 50 }}
    tbodyStyle={{ display: 'block', overflowY: 'scroll', width: '100%' }}
    rowStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }}
	KeyField={'Field1'}
    data={records}
	onSelection={(d) => {selectedItems = d}}
        />