ionic-react-tablegrid

This is a React component for displaying interactive grids.

quick example:

<TableGrid rows={rows} /* [{name:'Bob',age:22,eyes:'blue'},{name:'Al',age:33,eyes:'brown'}] */
    rowClick={clickHandler} /* (row, index) => { console.log(row, index) } */
    sort={{"orderBy": "name", "ascending": true}} /* currently data is sorted on name, ascending */
    headers={['Name','Age','Eye Color']} /* optional column headers */
    headerStyle={{backgroundColor: 'gray'}} /* optional styles for header row */
    rowStyle={{backgroundColor: 'white'}} /* optional styles for detail rows */
    maxColumnWidth={400} /* optional */
/>

Features

automatically set the width of each column based on the content it contains (including the content from all detail rows)
function to execute on row click
adjustable header and row styles
optional headers array (if headers need to be different from the field names)
sortable columns with icons for "sort ascending", "sort descending"

Installation

npm install --save ionic-react-tablegrid

TableGrid Attributes

rows (required)

takes an array of objects with key/value pairs

example:

[{"key1": "value1", "key2": "value2"}]

The keys should be consistent among all rows, (like a database or spreadsheet).

setRows (optional, required if using sorting)

takes a React useState setter

This is used to dynamically change the data in the TableGrid. For example:

const [people, setPeople] = useState([{name:"Larry"},{name:"Moe"},{name:"Curley"}]);

<TableGrid rows={people} setRows={setPeople} />

Say later, I want to add "Shemp" to the table:

setPeople([{name:"Larry"},{name:"Moe"},{name:"Curley"},{name:"Shemp"}]);

As stated above, if using any sort columns, this is required because TableGrid will call the setRows function to update the table when the user clicks on the sort icon.

headers (optional)

takes an array of strings to be used as the column headers

example:

["Name","Age","Eye Color"]

Headers can contain <IonIcon> objects: example:

["Name","Age",<IonIcon size="large" icon={eyeOutline} />]

rowClick (optional)

takes a function that receives two parameters: the row that was clicked (object), and the row's index (number)

example:

const clickHandler = (row: any, index: number) => {
    console.log(`you clicked item #${index}`, row)
}

sort (optional)

takes an object of type Sort with the initial sort data

export interface Sort {
    orderBy: string;
    ascending: boolean;
}

example (current data is sort on name, ascending):

{ "orderBy": "name", "ascending": true }

changeCheckboxesCallback (optional)

takes a callback function that receives an array of ids (strings) for the checkboxes that are currently checked

example:

const checkBoxesCallback = (checkboxes: string[]) => {
  console.log('checked boxes', checkboxes);
  // ['key1','key2','keyN']
}

headerStyle (optional)

additional object of styles for the header row

example:

{"backgroundColor": "gray", "color": "darkblue"}

rowStyle (optional)

additional object of styles for the detail rows

example:

{"backgroundColor": "white", "color": "black"}

maxColumnWidth (optional)

maximum size in pixels for a column

Row Attributes

Simple Object

you can pass a simple string, numeric, or boolean object like this:

const rows = [
    name: 'Mr Stringman', // string
    age: 55, // integer
    score: 10535.553, // float
    registered: true // boolean
]

NOTE: the column width for each column will be set based on the maximum width of the value of the row with the longest entry (up to the max value).

Sortable Columns

If you want a column to be sortable (with a toggle in the header to sort ascending or descending), just add a ^ (caret) the end of the column name, like this:

const rows = [
    name^: 'Mr Stringman', // string
    age^: 55, // integer
    score^: 10535.553, // float
    registered: true // boolean
]

In the example above, columns name^, age^, and score^ will be sortable. The ^ symbols will be stripped from header names automatically.

HIDDEN Objects

if an attribute name begins with $ it will not be rendered, but it can contain hidden data that can be read in your rowClick function

const rows = [{
    $id: 12345
    $hidden_notes: 'this note is hidden from the UI',
    name: 'Mr Stringman', // string
    age: 55, // integer
    score: 10535.553, // float
    registered: true // boolean
}]

IMAGE object

you can create an image object using TYPE: "IMAGE"

const rows = [{
    name: 'Bob',
    avatar: { 
        "TYPE": "IMAGE", 
        "url": "https://image.url", // required
        "cellStyle":{"textAlign": "center"}, // optional
        "rowStyle": {"height": "50px"} // optional
}]

You can pass optional objects for cellStyle and rowStyle for optional styling needs.

CHECKBOX object

you can create a checkbox object using TYPE: "CHECKBOX"

const rows = [{
    name: 'Bob',
    member: {
        "TYPE": "CHECKBOX", 
        "value": false, // "checked" also works here if you prefer
        "id": "Bob", // this value is passed to the checkBoxesCallback function
        "cellStyle":{"textAlign": "center"}, // optional
        "rowStyle": {"height": "50px"} // optional
        }
}]

You can pass optional objects for cellStyle and rowStyle for optional styling needs.

When using a CHECKBOX object you need to pass a callback function to your TableGrid called checkBoxesCallback which will contain an array of id's that are currently checked.

TableGrid:

<TableGrid rows={rows} 
    checkBoxesCallback={checkBoxesCallback}
/>

Callback Function:

const checkBoxesCallback = (checkboxes: string[]) => {
  console.log('checked boxes', checkboxes);
  // returns: ['key1','key2','keyN']
}

CUSTOM object

Custom objects can have custom formatted HTML and an optional sort object used to sort the table on this column.

Example:

[ { Product: "Motorcycle",
    Price: { "TYPE": "CUSTOM",
             "html": "USD$14,999.99" + "<br/>" + "What a great price!",
             "sort": 14999.99 }},
  { Product: "Car",
    Price: { "TYPE": "CUSTOM",
             "html": "USD$24,550.99" + "<br/>" + "Ride in comfort!",
             "sort": 24550.99 }},
]

In addition, the html property of a custom object can contain an object, such as <IonIcon>. Example:

[ { Product: "Motorcycle",
    Price: { "TYPE": "CUSTOM",
             "html": "USD$14,999.99" + "<br/>" + "What a great price!",
             "discount": <IonIcon icon={cashOutline} />,
             "sort": 14999.99 }},
  { Product: "Car",
    Price: { "TYPE": "CUSTOM",
             "html": "USD$24,550.99" + "<br/>" + "Ride in comfort!",
             "discount": <IonIcon icon={cardOutline} />,
             "sort": 24550.99 }},
]

Example

import { TableGrid } from 'ionic-react-tablegrid'
const [rows, setRows] = useState([
    {name: 'John', age: 20, eyes: 'brown', $id: 1},
    {name: 'Jane', age: 21, eyes: 'blue', $id: 2},
    {name: 'Joe', age: 22, eyes: 'green', $id: 3},
    {name: 'Jack', age: 23, eyes: 'brown', $id: 4},
    {name: 'Jill', age: 24, eyes: 'blue', $id: 5},
    {name: 'Juan', age: 25, eyes: 'green', $id: 6},
    {name: 'Jenny', age: 26, eyes: 'brown', $id: 7}
])

const rowsWithThumbNail = [
    {name: 'John', age: 20, eyes: 'brown',
        thumbnail: { "TYPE": "IMAGE", "url": "https://image.url", 
                    "cellStyle":{"textAlign": "center"}, 
                    "rowStyle": {"height": "50px"}}

]
const rowsWithCheckbox = [
    {name: 'John', 
    age: 20, 
    eyes: 'brown',
    checkbox: {
        "TYPE": "CHECKBOX", 
        "value": false, 
        "id": "John"}
]
const rowsWithSorting = [ 
    { Product: "Motorcycle",
        Price: { "TYPE": "CUSTOM",
                "html": "USD$14,999.99" + "<br/>" + "What a great price!",
                "sort": 14999.99 }},
    { Product: "Car",
        Price: { "TYPE": "CUSTOM",
                "html": "USD$24,550.99" + "<br/>" + "Ride in comfort!",
                "sort": 24550.99 }},
]
const clickHandler = (row: any, index: number) => {
    console.log(`you clicked item #${index}`, row);
    console.log(`the id of this row is ${$id}`);
}
const checkBoxesCallback = (checkboxes: string[]) => {
  console.log('checked boxes', checkboxes);
  // ['key1','key2','keyN']
}
return (
    <TableGrid rows={rows} setRows={setRows}
        headers={['Name','Age','Eye Color']}
        rowClick={clickHandler} 
        sort={{"name", true}} 
        checkBoxesCallback={checkBoxesCallback}
        headerStyle={{backgroundColor: 'gray'}}
        rowStyle={{backgroundColor: 'white'}}
    />
)