Table: React

A table is used to organise and display tabular data in a way that's easy to scan.

OverviewReactSwiftKotlin

Installation

Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.

With that done, you’re now ready to implement the component in your application.

import { Table } from '@mediahuis/chameleon-react';

export default function Example() {
  return (
    <Table
      columns={[{ title: 'Examples', field: 'exampleProp' }]}
      data={[
        {
          exampleProp: 'Example',
        },
      ]}
    />
  );
}

Properties

Property	Type	Default	Required	Description
columns	Array	-	No	Columns displayed in the table.
data	Array	-	No	Rows displayed in the table.
emptyDescription	String	-	Yes	The description displayed when the table is empty.
emptyIcon	ReactNode	Search	No	The icon displayed when the table is empty.
loading	Boolean	-	No	Show a loading state (e.g., while fetching data).
sorting	Boolean	-	No	Defines if the table can be sortable.
tableLayout	'auto' | 'fixed' | 'inherit'	'auto'	No	Defines the algorithm used to lay out table cells, rows, and columns. Can be used to force a cell's width.

• Installation
• Properties