You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

@workday/canvas-kit-react-table

Package Overview
Dependencies
5
Maintainers
6
Versions
299
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@workday/canvas-kit-react-table

Canvas data grids


Version published
Maintainers
6
Created

Readme

Source

Canvas Kit Table

A component for applying Canvas styling to table elements.

> Workday Design Reference

Installation

yarn add @workday/canvas-kit-react

or

yarn add @workday/canvas-kit-react-table

Usage

Extends <table> with Canvas data table styling. Use with native <thead> and <tbody> elements for respective styling.

Use <TableRow> component instead of <tr> to define rows.

import {Table, TableRow} from '@workday/canvas-kit-react-table';

<Table>
  <thead>
    <TableRow header={true}>
      <th>ID</th>
      <th>Name</th>
    </TableRow>
  </thead>
  <tbody>
    <TableRow>
      <td>1</td>
      <td>Aidan Brown</td>
    </TableRow>
    <TableRow>
      <td>2</td>
      <td>Betty Chen</td>
    </TableRow>
  </tbody>
</Table>;

Static Properties

None

Component Props

Required

None

Optional

None

TableRow

Usage

Extends <tr> with row states and styling. Use with <th> and <td> elements.

import {Table, TableRow} from '@workday/canvas-kit-react-table';

<Table>
  <thead>
    <TableRow header={true}>
      <th>ID</th>
      <th>Name</th>
    </TableRow>
  </thead>
  <tbody>
    <TableRow state={TableRow.State.Error}>
      <td>1</td>
      <td>Aidan Brown</td>
    </TableRow>
    <TableRow state={TableRow.State.Alert}>
      <td>2</td>
      <td>Betty Chen</td>
    </TableRow>
  </tbody>
</Table>;

Static Properties

State: TableRowState
<TableRow state={TableRow.State.Error}>
ThemeDescription
ErrorRed border, light red background
InputErrorRegular borders, light red background
AlertOrange border, light orange background
InputAlertRegular borders, light orange background
HoverGrey background
SelectedBlue border, light blue background

InputError and InputAlert are used for cases when the error is on the input-level rather than the entire row. This style produces a colored row without a darkened border.

Component Props

Optional

state: TableRowState

The state of the row

Default: null


header: boolean

Whether or not the row contains header elements. If true, special styling will be applied for header elements.

Default: false

Keywords

FAQs

Package last updated on 09 Jul 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc