Skip to content

Commit

Permalink
feat(Th): add table header sortable props (#1706)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tujoworker @joakbjerk
tujoworker authored and joakbjerk committed Mar 27, 2023
1 parent 3031626 commit f15f6ef
Show file tree
Hide file tree
Showing 11 changed files with 329 additions and 178 deletions.
140 changes: 70 additions & 70 deletions packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,54 +14,54 @@ export const TableVariantBasic = () => (
<Table className="dnb-table">
<caption>A Table Caption</caption>
<thead>
<tr>
<th scope="col" colSpan="2" className="dnb-table--no-wrap">
<Tr>
<Th scope="col" colSpan={2} noWrap>
Header
</th>
<th scope="col" className="dnb-table--sortable dnb-table--reversed">
</Th>
<Th scope="col" sortable reversed>
<Button
variant="tertiary"
icon="arrow-down"
text="Sortable"
title="Sort table column"
wrap="true"
/>
</th>
<th scope="col" align="right" className="dnb-table--sortable dnb-table--active">
</Th>
<Th scope="col" align="right" sortable active>
<Button
variant="tertiary"
icon="arrow-down"
text="Active"
title="Sort table column"
wrap="true"
/>
</th>
</tr>
</Th>
</Tr>
</thead>
<tbody>
<tr>
<td>
<Tr>
<Td>
<P space={0}>Column 1 <b>width p</b></P>
</td>
<td>
</Td>
<Td>
<Code>Column 2 with code</Code>
</td>
<td>
</Td>
<Td>
<span>Column 3 with span</span>
</td>
<td align="right">Column 4</td>
</tr>
<tr>
<td colSpan="2">Column which spans over two columns</td>
<td>Column 3</td>
<td align="right">Column 4</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td align="right">Column 4</td>
</tr>
</Td>
<Td align="right">Column 4</Td>
</Tr>
<Tr>
<Td colSpan={2}>Column which spans over two columns</Td>
<Td>Column 3</Td>
<Td align="right">Column 4</Td>
</Tr>
<Tr>
<Td>Column 1</Td>
<Td>Column 2</Td>
<Td>Column 3</Td>
<Td align="right">Column 4</Td>
</Tr>
</tbody>
</Table>
`
Expand Down Expand Up @@ -120,36 +120,36 @@ export const TableLongHeader = () => (
<Table>
<caption className="dnb-sr-only">A Table Caption</caption>
<thead>
<tr className="dnb-table--small">
<th scope="col" colSpan="2">
<Tr className="dnb-table--small">
<Th scope="col" colSpan="2">
Static long header senectus ornare convallis ut at erat imperdiet commodo
</th>
<th scope="col" className="dnb-table--sortable dnb-table--reversed">
</Th>
<Th scope="col" className="dnb-table--sortable dnb-table--reversed">
<Button
variant="tertiary"
icon="arrow-down"
text="Sortable long header ridiculus laoreet turpis netus at vitae"
title="Sort table column"
wrap="true"
/>
</th>
<th scope="col" align="right" className="dnb-table--sortable dnb-table--active">
</Th>
<Th scope="col" align="right" className="dnb-table--sortable dnb-table--active">
<Button
variant="tertiary"
icon="arrow-down"
text="Active and right aligned long header ridiculus laoreet turpis netus at vitae"
title="Sort table column"
wrap="true"
/>
</th>
</tr>
</Th>
</Tr>
</thead>
<tbody>
<tr>
<td colSpan="4">
<Tr>
<Td colSpan="4">
<P space={0}>col span of 4</P>
</td>
</tr>
</Td>
</Tr>
</tbody>
</Table>
`
Expand Down Expand Up @@ -180,61 +180,61 @@ export const TableSticky = () => (
<Table sticky={true} sticky_offset="4rem" className="dnb-table--fixed">
<caption className="dnb-sr-only">A Table Caption</caption>
<thead>
<tr>
<th scope="col" colSpan="2">
<Tr>
<Th scope="col" colSpan="2">
Header
</th>
<th scope="col" className="dnb-table--sortable dnb-table--reversed">
</Th>
<Th scope="col" className="dnb-table--sortable dnb-table--reversed">
<Button
variant="tertiary"
icon="arrow-down"
text="Sortable"
title="Sort table column"
wrap="true"
/>
</th>
<th scope="col" className="dnb-table--sortable dnb-table--active">
</Th>
<Th scope="col" className="dnb-table--sortable dnb-table--active">
<Button
variant="tertiary"
icon="arrow-down"
text="Active"
title="Sort table column"
wrap="true"
/>
</th>
</tr>
</Th>
</Tr>
</thead>
<tfoot>
<tr>
<td colSpan="3">Footer</td>
<td>Sum</td>
</tr>
<Tr>
<Td colSpan="3">Footer</Td>
<Td>Sum</Td>
</Tr>
</tfoot>
<tbody>
<Table.StickyHelper />
<tr>
<td>
<Tr>
<Td>
<P space={0}>Column 1 <b>width p</b></P>
</td>
<td>
</Td>
<Td>
<Code>Column 2 with code</Code>
</td>
<td>
</Td>
<Td>
<span>Column 3 with span</span>
</td>
<td>Column 4</td>
</tr>
</Td>
<Td>Column 4</Td>
</Tr>
<tr id="scroll-to-tr-id">
<td colSpan="2">Column which spans over two columns</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<Td colSpan="2">Column which spans over two columns</Td>
<Td>Column 3</Td>
<Td>Column 4</Td>
</tr>
<Tr>
<Td>Column 1</Td>
<Td>Column 2</Td>
<Td>Column 3</Td>
<Td>Column 4</Td>
</Tr>
</tbody>
</Table>
`
Expand Down
8 changes: 4 additions & 4 deletions packages/dnb-design-system-portal/src/docs/uilib/components/table/demos.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,6 @@ TableSticky,

## Demos

### Example usage of class helpers

<TableClassHelpers />

### Default variant

<TableVariantBasic />
Expand All @@ -41,3 +37,7 @@ TableSticky,
Also, the table header is set to **small** font-size.

<TableLongHeader />

### Example usage of class helpers

<TableClassHelpers />
17 changes: 17 additions & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/table/properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ showTabs: true

## Properties

### `<Table>`

| Properties | Description |
| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `sticky` | _(optional)_ use `true` to enable a sticky Table header. Defaults to `false`. |
Expand All @@ -12,3 +14,18 @@ showTabs: true
| ~~`size`~~ (not implemented yet) | _(coming)_ spacing size inside the table header and data. Options: `small` \| `medium` \| `large` \. Defaults to `large`. |
| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. |
| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |

### Table Row `<Tr>`

| Properties | Description |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `variant` | _(optional)_ defines the variant of the current row. If set to either `odd` or `even`, the next row one will continue with the opposite. Defaults to automatic. |

### Table Header `<Th>`

| Properties | Description |
| ---------- | ----------------------------------------------------------------------------------------------- |
| `sortable` | _(optional)_ defines the table header as sortable if set to `true`. Defaults to `false`. |
| `active` | _(optional)_ defines the sortable column as the current active. Defaults to `false`. |
| `reversed` | _(optional)_ defines the sortable column as in reversed order. Defaults to `false`. |
| `noWrap` | _(optional)_ if set to `true`, the header text will not wrap to new lines. Defaults to `false`. |
6 changes: 0 additions & 6 deletions packages/dnb-eufemia/src/components/table/TableTd.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,6 @@ export type TableTdProps = {
* Default: null
*/
children?: React.ReactNode

/**
* Custom className on the component root
* Default: null
*/
className?: string
}

const Td = (
Expand Down
33 changes: 29 additions & 4 deletions packages/dnb-eufemia/src/components/table/TableTh.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,28 @@ export type TableThProps = {
children: React.ReactNode

/**
* Custom className on the component root
* Default: null
* Defines the table header as sortable
* Default: false
*/
className?: string
sortable?: boolean

/**
* Defines the sortable column as the current active
* Default: false
*/
active?: boolean

/**
* Defines the sortable column as in reversed order
* Default: false
*/
reversed?: boolean

/**
* If set to true, the header text will not wrap to new lines
* Default: false
*/
noWrap?: boolean
}

const Th = (
Expand All @@ -21,7 +39,10 @@ const Th = (
const {
className,
children,

sortable,
active,
reversed,
noWrap,
...props
} = componentProps

Expand All @@ -30,6 +51,10 @@ const Th = (
role="columnheader"
className={classnames(
'dnb-table__th',
sortable && 'dnb-table--sortable',
active && 'dnb-table--active',
reversed && 'dnb-table--reversed',
noWrap && 'dnb-table--no-wrap',
className
)}
{...props}
Expand Down
6 changes: 0 additions & 6 deletions packages/dnb-eufemia/src/components/table/TableTr.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,6 @@ export type TableTrProps = {
children:
| React.ReactElement<TableTdProps>
| Array<React.ReactElement<TableTdProps>>

/**
* Custom className on the component root
* Default: null
*/
className?: string
}

const Tr = (
Expand Down
Loading

0 comments on commit f15f6ef

Please sign in to comment.