Typescript React Table

Simple yet powerful table, like a hammer.

Most Recent Change List

• 1.2.3

  • Audit and Updated dependencies.

• 1.2.1

  • adds tableFooter usage to read me

• 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

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 overrides
  • header for the header row
  • footer for the footer row

Special Thanks

• For referencing how to make a library:
  https://www.tsmean.com/articles/how-to-write-a-typescript-library/
• My NPM Profile:
  https://www.npmjs.com/~josh415
• mom