OdinTable

The OdinTable and OdinTableRow components provide an easy and automatic way to display information in a table. Information can be formatted as a Dictionary style object and passed as a property to a TableRow, which will then be rendered by the OdinTable component as expected. The OdinTable component can be provided a list of columns to display, and any parameters or other data not found within that list will not be rendered within the table.

Table columns can also have defined widths for easier styling.

Note

The way data is passed to the TableRow component makes it very easy to pass parameters from an Adapter directly into the table, and the way columns are defined by the OdinTable component means it can ensure only the relevant parameters are displayed, meaning no manual filtering of the parameters is required.

Properties

import { OdinTable, OdinTableRow } from 'odin-react';

OdinTable

Important

Any properties not listed here will be passed to the underlying Table component, to allow for the styling provided by that component.

Name	Type	Default	Description
columns	{[key: string]: string}		Required A dictionary style Object that defines the names, and titles, of each column to render for the table.
header	boolean	'true'	Define if the table should render a Table Header.
widths	{[key: string]: CSSProperties.width}	{}	defines the widths for each named column. Columns without defined widths will auto scale based on their contents.

OdinTableRow

Important

Whilst the intention is that any value that can be returned from an Adapter can be passed directly to the TableRow, it is assumed that those values are Single Parameters. The table may struggle to render more complex data types like Arrays or Dictionaries.

Name	Type	Default	Description
row	{[key: string]: JSON}		Required A Dictionary object of values to display within the Table. Any values whose key is not in the tables list of columns will not be displayed.

Example

const tableData = endpoint.data.tableData ?? {};

...

<OdinTable columns={{timestamp: "Timestamp", "message": "Message", "level": "Level"}}>
    {tableData.map((log) => (
        // the key prop is a standard prop for any React Component.
        // React throws a warning if components rendered in a looping function, like map, are not provided with unique keys.
        <OdinTableRow key={log.timestamp} row={log}/>
    ))}
</OdinTable>

todo: image of the table