1.2.2 • Published 2 years ago
ts-jsx-table v1.2.2
Typescript React Table
Simple yet powerful table, like a hammer.
Most Recent Change List
1.2.1
- adds
tableFooter
usage to read me
- adds
1.2.0
- Read me updates
- Changes the typing of
TableColumns
to include[]
in the definition. No longer needing to specify[]
in your code.
1.1.0
- fixes imports to use:
import Table, {TableColumns} from "ts-jsx-table";
- Read me updates
- fixes imports to use:
ex:
Given data:
let myData: MyDataType[] = [
{
name: 'uno momento',
number: 1,
checked: false,
},
{
name: 'dos',
number: 2,
checked: false,
},
]
Of Type:
type MyDataType = {
name: string;
number: number;
checked: boolean;
}
You create the column defs:
import {TableColumns} from "ts-jsx-table"
let theColumns: TableColumns<MyDataType> = [
{
headerTitle: "Name",
attribute: "name",
},
{
headerTitle: "ThisLittleNumber",
attribute: "number",
},
{
headerTitle: "SomeCheckboxes",
cellRender:
(tableRow: MyDataType) => (
<input
type='checkbox'
value={ tableRow.checked }
onChange={logTheChangeHandler}
/> ),
},
]
Stitch them together:
import Table from "ts-jsx-table";
<Table<MyDataType>
TableColumns={theColumns}
tableRows={myData}
/>
As you can see we used <MyDataType>
in several places. The library is built to utilize custom types throughout leveraging Typescript to help with autocomplete and type checking.
Using Table Footers
If for instance you want to have a sums column for MyDataType.number, you can easily utilize the TableColumn.tableFooter
. Adjusting the above code:
let total = (myDatas: MyDataType[]) => {
let count = 0;
myDatas.forEach(p => {
count += p.quantity
});
return count;
}
theColumns[1].tableFooter = total
If you would also like to style it with a pretty background you can add in:
theColumns[1].footer = { style: { backgroundColor: "lightblue" } }
Alternatively you could build it right into theColumns
for a cleaner definition:
let theColumns: TableColumns<MyDataType> = [
// Name column
{
headerTitle: "ThisLittleNumber",
attribute: "number",
tableFooter: (products: ProductRow[]) => {
let count = 0;
products.forEach(p => {
count += p.quantity
});
return count;
},
footer:{style:{backgroundColor: "lightblue"}},
},
// check box column
]
Styling Functionality
Style and Prop overrides are baked into each layer using:
PropsAndStyle
datatype:
whereToApply = {
style: {
anyCssStyle:"ToBeOverridden"
},
props: {
anyHtmlProps:"toBeOverridden"
}
}
- within
TableColumns
you can use:
tableColumn = {
headerTitle: "Example",
attibute: "example",
header: {
props: {
onClick:() => {
console.log("I clicked the Example header")
}
} },
column:{
style:{
backgroundColor:"red"
} },
footer:{
style:{
color:"#eeeeee"
} },
}
- within
<Table />
you can use the props of:table
for general table overridesheader
for the header rowfooter
for the footer row
Special Thanks
- For referencing how to make a library: https://www.tsmean.com/articles/how-to-write-a-typescript-library/
- mom