Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added small table variant website doc #1831

Merged
merged 18 commits into from
Feb 28, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions lib/src/table/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@ type Props = {
margin?: Space | Margin;
/**
* Determines the visual style and layout
* - "default": Table with big spacing, applicable to most cases.
* - "reduced": Smaller table with minimal spacing for high density information.
* - "default": Default table size.
* - "reduced": More compact table with less spacing for high density information.
*/
mode?: "default" | "reduced";
};
Expand Down
54 changes: 27 additions & 27 deletions website/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import basicUsage from "./examples/basicUsage";
import sortable from "./examples/sortable";
import TableCode from "@/common/TableCode";
import StatusTag from "@/common/StatusTag";
import reduced from "./examples/reduced";

const sections = [
{
Expand Down Expand Up @@ -77,6 +78,30 @@ const sections = [
</td>
<td>-</td>
</tr>
<tr>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusTag status="Information">New</StatusTag>mode
</DxcFlex>
</td>
<td>
<TableCode>'default' | 'reduced'</TableCode>
</td>
<td>
The available table modes:
<ul>
<li>
<b>default</b>: Default table size.
</li>
<li>
<b>reduced</b>: More compact table with less spacing for high density information.
</li>
</ul>
</td>
<td>
<TableCode>'default'</TableCode>
</td>
</tr>
<tr>
<td>showGoToPage</td>
<td>
Expand Down Expand Up @@ -160,6 +185,12 @@ const sections = [
title: "Basic usage",
content: <Example example={basicUsage} defaultIsVisible />,
},
{
title: "Reduced usage",
content: (
<Example example={reduced} defaultIsVisible />
),
},
{
title: "Sortable",
content: <Example example={sortable} defaultIsVisible />,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
import React from "react";

export const deleteIcon = (
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="white"
>
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
<path d="M0 0h24v24H0z" fill="none" />
</svg>
);

Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import {
DxcResultsetTable,
DxcInset,
Mil4n0r marked this conversation as resolved.
Show resolved Hide resolved
} from "@dxc-technology/halstack-react";
import { deleteIcon } from "./Icons";

const code = `() => {
const columns = [
{ displayValue: "Id"},
{ displayValue: "Name"},
{ displayValue: "City"},
{ displayValue: "Actions"},
];

const actions = [
{
icon: deleteIcon,
title: "icon",
onClick: () => {},
},
];

const rows = [
[
{ displayValue: "001"},
{ displayValue: "Peter"},
{ displayValue: "Miami"},
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
[
{ displayValue: "002"},
{ displayValue: "Louis"},
{ displayValue: "London"},
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
[
{ displayValue: "003"},
{ displayValue: "Lana"},
{ displayValue: "Amsterdam"},
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
[
{ displayValue: "004"},
{ displayValue: "Rick"},
{ displayValue: "London"},
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
[
{ displayValue: "005"},
{ displayValue: "Mark"},
{ displayValue: "Miami"},
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
[
{ displayValue: "006"},
{ displayValue: "Cris"},
{ displayValue: "Paris"},
{ displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
],
];

return (
<DxcInset space="2rem">
<DxcResultsetTable
columns={columns}
rows={rows}
mode="reduced"
></DxcResultsetTable>
</DxcInset>
);
}`;

const scope = {
DxcResultsetTable,
DxcInset,
deleteIcon,
};

export default { code, scope };