@gpa-gemstone/react-table
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.17 • Public • Published

    react-table

    gemstone logo

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

    GitHub license

    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}}
            />

    Install

    npm i @gpa-gemstone/react-table

    DownloadsWeekly Downloads

    145

    Version

    1.2.17

    License

    MIT

    Unpacked Size

    29.2 kB

    Total Files

    12

    Last publish

    Collaborators

    • gcsantos
    • elwills
    • wbernest
    • clackner-gpa