How to use @pluralsight/ps-design-system-table - 7 common examples
To help you get started, we’ve selected a few @pluralsight/ps-design-system-table examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
pluralsight / design-system / packages / site / pages / components / table.js View on Github 
{state.rows.sort(sortRows).map(row => (
<div style="{{">
{row.name}
</div>
{row.courses}
{row.viewTime}m
))}null,
null,
'content of table, per row'
]),
PropTypes.row([
'inDrawer',
'boolean',
null,
<code>false</code>,
'used to add additional styles when table is nested in a Drawer'
])
],
'Table.Cell': [
PropTypes.row([
'align',
PropTypes.union(Table.aligns),
null,
<code>left</code>,
'text alignment'
]),
PropTypes.row([
'emphasis',
'boolean',
null,
<code>false</code>,
'highlight content priority'
]),
PropTypes.row([
'flex',
'string',
null,
null,constructor(props) {
super(props)
this.state = {
fields: [
{ key: 'name', name: 'Name', align: Table.aligns.left },
{ key: 'courses', name: 'Unique Courses', align: Table.aligns.right },
{ key: 'viewTime', name: 'View Time', align: Table.aligns.right }
],
sortKey: 'name',
sortDirection: Table.sorts.asc,
rows: [
{
name: 'Tod Gentille',
courses: 41,
viewTime: 839
},
{
name: 'Dmitry Borodyansky',
courses: 2,
viewTime: 12
},
{constructor(props) {
super(props)
this.state = {
fields: [
{ key: 'name', name: 'Name', align: Table.aligns.left },
{ key: 'courses', name: 'Unique Courses', align: Table.aligns.right },
{ key: 'viewTime', name: 'View Time', align: Table.aligns.right }
],
sortKey: 'name',
sortDirection: Table.sorts.asc,
rows: [
{
name: 'Tod Gentille',
courses: 41,
viewTime: 839
},
{
name: 'Dmitry Borodyansky',
courses: 2,
viewTime: 12
},{state.rows.sort(sortRows).map(row => (
<div style="{{">
{row.name}
</div>
{row.courses}
{row.viewTime}m
))}<code>flex</code> css attribute to control column width
]),
PropTypes.row([
'onClick',
<span>
<code>sort</code>
{' => ()'}
</span>,
null,
null,
'triggered on header click, returns new sort direction'
]),
PropTypes.row([
'sort',
PropTypes.union(Table.sorts),
null,
null,
'labels column as sortable or sorted'
])
]
}}
/>
In-app example
Emphasis
<p>
Place the primary column, often "Name" or "Title", leftmost in the
table. Add emphasis to visually anchor the primary column.
</p>constructor(props) {
super(props)
this.state = {
fields: [
{ key: 'name', name: 'Name', align: Table.aligns.left },
{ key: 'courses', name: 'Unique Courses', align: Table.aligns.right },
{ key: 'viewTime', name: 'View Time', align: Table.aligns.right }
],
sortKey: 'name',
sortDirection: Table.sorts.asc,
rows: [
{
name: 'Tod Gentille',
courses: 41,
viewTime: 839
},
{
name: 'Dmitry Borodyansky',
courses: 2,
viewTime: 12
},
{
name: 'Jake Trent',
courses: 7,
viewTime: 294
}@pluralsight/ps-design-system-table
Table UI Component for the Pluralsight Design System
