Table

Show design guidelines

Code

Framework HTML React Angular

Default

Study	Project	Licenses	Actions
ABC-123	ABC	2	Edit
ABC-456	ABC	10	Edit
DEF-123	DEF	102	Edit

Toggle dark mode

<certara-table full-height="false" sort="true">
  <table>
    <thead>
      <tr>
        <th>Study</th>
        <th>Project</th>
        <th>Licenses</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ABC-123</td>
        <td>ABC</td>
        <td>2</td>
        <td>
          <certara-link href="#">Edit</certara-link>
        </td>
      </tr>
      <tr>
        <td>ABC-456</td>
        <td>ABC</td>
        <td>10</td>
        <td>
          <certara-link href="#">Edit</certara-link>
        </td>
      </tr>
      <tr>
        <td>DEF-123</td>
        <td>DEF</td>
        <td>102</td>
        <td>
          <certara-link href="#">Edit</certara-link>
        </td>
      </tr>
    </tbody>
  </table>
</certara-table>

import { CertaraLink, CertaraTable } from '@certara/certara-ui-react';

<CertaraTable fullHeight={false} sort={true}>
  <table>
    <thead>
      <tr>
        <th>Study</th>
        <th>Project</th>
        <th>Licenses</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ABC-123</td>
        <td>ABC</td>
        <td>2</td>
        <td>
          <CertaraLink href="#">Edit</CertaraLink>
        </td>
      </tr>
      <tr>
        <td>ABC-456</td>
        <td>ABC</td>
        <td>10</td>
        <td>
          <CertaraLink href="#">Edit</CertaraLink>
        </td>
      </tr>
      <tr>
        <td>DEF-123</td>
        <td>DEF</td>
        <td>102</td>
        <td>
          <CertaraLink href="#">Edit</CertaraLink>
        </td>
      </tr>
    </tbody>
  </table>
</CertaraTable>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-table full-height="false" sort="true">
  <table>
    <thead>
      <tr>
        <th>Study</th>
        <th>Project</th>
        <th>Licenses</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ABC-123</td>
        <td>ABC</td>
        <td>2</td>
        <td>
          <certara-link href="#">Edit</certara-link>
        </td>
      </tr>
      <tr>
        <td>ABC-456</td>
        <td>ABC</td>
        <td>10</td>
        <td>
          <certara-link href="#">Edit</certara-link>
        </td>
      </tr>
      <tr>
        <td>DEF-123</td>
        <td>DEF</td>
        <td>102</td>
        <td>
          <certara-link href="#">Edit</certara-link>
        </td>
      </tr>
    </tbody>
  </table>
</certara-table>

Bordered

Item	Quantity	Price
Widget A	5	$25.00
Widget B	3	$15.00

Toggle dark mode

<certara-table bordered full-height="false" sort="true">
  <table>
    <thead>
      <tr>
        <th>Item</th>
        <th>Quantity</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Widget A</td>
        <td>5</td>
        <td>$25.00</td>
      </tr>
      <tr>
        <td>Widget B</td>
        <td>3</td>
        <td>$15.00</td>
      </tr>
    </tbody>
  </table>
</certara-table>

import { CertaraTable } from '@certara/certara-ui-react';

<CertaraTable bordered fullHeight={false} sort={true}>
  <table>
    <thead>
      <tr>
        <th>Item</th>
        <th>Quantity</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Widget A</td>
        <td>5</td>
        <td>$25.00</td>
      </tr>
      <tr>
        <td>Widget B</td>
        <td>3</td>
        <td>$15.00</td>
      </tr>
    </tbody>
  </table>
</CertaraTable>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-table bordered full-height="false" sort="true">
  <table>
    <thead>
      <tr>
        <th>Item</th>
        <th>Quantity</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Widget A</td>
        <td>5</td>
        <td>$25.00</td>
      </tr>
      <tr>
        <td>Widget B</td>
        <td>3</td>
        <td>$15.00</td>
      </tr>
    </tbody>
  </table>
</certara-table>

certara-table

Properties

autoRefresh

Attribute	auto-refresh
Type	boolean
Default	true
Required	false
Description	Automatically refresh the table when the data prop changes

bordered

Attribute	bordered
Type	boolean
Default	false
Required	false
Description	Puts borders between table data cells

columns

Attribute	undefined
Type	string[]
Default	undefined
Required	false
Description	Can be an array or an array of objects. This needs to be set with JS when the component is in an HTML context

data

Attribute	undefined
Type	any[]
Default	undefined
Required	false
Description	Can be an array of arrays, or an array of objects. This needs to be set with JS when the component is in an HTML context

fixedHeader

Attribute	fixed-header
Type	boolean
Default	false
Required	false
Description	Fixed headers also require a set height

from

Attribute	undefined
Type	HTMLTableElement
Default	undefined
Required	false
Description	Reference to an existing HTML <table> element to use as the data source. GridJS will read the data from this table. Alternatively, place a <table> element as a child of <certara-table> and it will be auto-detected. See: https://gridjs.io/docs/examples/from

fullHeight

Attribute	full-height
Type	boolean
Default	true
Required	false
Description	The table container will stretch to the full height of the viewport

height

Attribute	height
Type	string
Default	undefined
Required	false
Description	Set height with CSS units (e.g. 400px)

offsetY

Attribute	offset-y
Type	string
Default	undefined
Required	false
Description	Offset to stretch table to fill available vertical space aside from reserved space for toolbars, etc. (e.g., 230px)

pagination

Attribute	pagination
Type	boolean | object
Default	undefined
Required	false
Description	Set to true to show pagination, configure extended options with the JS object (Docs)

resizable

Attribute	resizable
Type	boolean
Default	false
Required	false
Description	Allows columns to be resized

search

Attribute	search
Type	boolean
Default	false
Required	false
Description	Shows a built-in table filter search field

searchPlaceholder

Attribute	search-placeholder
Type	string
Default	'Search'
Required	false
Description	Placeholder text for built-in table search input

sort

Attribute	sort
Type	boolean
Default	false
Required	false
Description	Allows simple sorting on columns. More complex data needs to have custom rules in the columns.sort.compare object

tableClassName

Attribute	table-class-name
Type	string
Default	undefined
Required	false
Description	Adds a className specifically to the rendered <table> element vs. the component wrapper

Events

There are no events available for this component

Methods

Name	Signature	Description
refresh	() => Promise<void>	Force a re-render of the table

Slots

Name	Description
	Default slot for an optional HTML <table> element to use as the data source
filters	Slot for center-aligned toolbar content
left-actions	Slot for left-aligned toolbar content
right-actions	Slot for right-aligned toolbar content