@gpa-gemstone/react-table
v1.2.56
Published
Table for GPA web applications
Downloads
269
Readme
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}}
/>