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.

Sign up for GitHub

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

Jump to bottom

Add new 'mode' prop to HalTable component to support 'reduced' mode #75

Merged
merged 1 commit into from
Jul 23, 2024
Merged

Add new 'mode' prop to HalTable component to support 'reduced' mode #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,14 @@ Hooks

#### HalTable Props

| Name | Default | Description |
| :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| collectionUrl: `string` | | The URL of the collection resource to be used for the table. `Required` |
| headers: `object` | | Contains the HTTP headers to be sent along with the HTTP requests to the collectionUrl. `Optional` |
| itemsPerPage: `number` | 5 | The amount of items to be displayed per page. Will be used to calculate the `_start` and `_num` query parameters that will be sent to the collection for pagination. `Optional` |
| asyncHeadersHandler: `() => Promise<object>` | | Async function that will be executed right before every HTTP request in order to retrieve dynamic headers. It must return a promise that resolves into an object with the keys and values of the headers. These headers will be merged with the ones indicated in the `headers` prop. `Optional` |
| columns: `Column[]` | [] | Array of objects specifying the columns to be displayed in the table. Each Column object has:<br> - <b>header</b>: Column label to be place at the table header.<br> - <b>displayProperty</b>: The name of the property in the items summary to be rendered for this column in the table.<br> - <b>sortProperty</b>: The name of the property in the items summary to be used for sorting the table.<br> - <b>onClickItemFunction</b>: Callback function that will be executed when the user clicks an item in that column. The collection item will be passed to this function when executed.<br> - <b>mapFunction</b>: Callback function that must return the value to be rendered in that column for a specific item. The item will be passed to this function as a parameter. |
| Name | Default | Description |
| :------------------------------------------- | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| collectionUrl: `string` | | The URL of the collection resource to be used for the table. `Required` |
| headers: `object` | | Contains the HTTP headers to be sent along with the HTTP requests to the collectionUrl. `Optional` |
| itemsPerPage: `number` | 5 | The amount of items to be displayed per page. Will be used to calculate the `_start` and `_num` query parameters that will be sent to the collection for pagination. `Optional` |
| asyncHeadersHandler: `() => Promise<object>` | | Async function that will be executed right before every HTTP request in order to retrieve dynamic headers. It must return a promise that resolves into an object with the keys and values of the headers. These headers will be merged with the ones indicated in the `headers` prop. `Optional` |
| columns: `Column[]` | [] | Array of objects specifying the columns to be displayed in the table. Each Column object has:<br> - <b>header</b>: Column label to be place at the table header.<br> - <b>displayProperty</b>: The name of the property in the items summary to be rendered for this column in the table.<br> - <b>sortProperty</b>: The name of the property in the items summary to be used for sorting the table.<br> - <b>onClickItemFunction</b>: Callback function that will be executed when the user clicks an item in that column. The collection item will be passed to this function when executed.<br> - <b>mapFunction</b>: Callback function that must return the value to be rendered in that column for a specific item. The item will be passed to this function as a parameter. |
| mode: `'default'` \| `'reduced'` | `default` | The available table modes:<br>- <b>default</b>: Default table size.<br> - <b>reduced</b>: More compact table with less spacing for high density information. |

#### HalTable Example

Expand Down
47 changes: 35 additions & 12 deletions app/src/app/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { HalTable, HalAutocomplete } from '@dxc-technology/halstack-react-hal';
import { HalTable, HalAutocomplete } from "@dxc-technology/halstack-react-hal";
import {
DxcApplicationLayout,
DxcInset,
DxcHeading,
DxcFlex,
} from '@dxc-technology/halstack-react';
} from "@dxc-technology/halstack-react";

function App() {
return (
Expand All @@ -15,23 +15,46 @@ function App() {
<DxcFlex direction="column" gap="2rem">
<DxcHeading level={2} text="HalTable example" />
<HalTable
collectionUrl={'http://your-api/users'}
mode="reduced"
collectionUrl={"http://localhost:3001/policies"}
columns={[
{
header: 'Email',
displayProperty: 'email',
sortProperty: 'email',
header: "Email",
displayProperty: "email",
sortProperty: "email",
},
{
header: 'Phone Number',
displayProperty: 'phone_number',
sortProperty: 'phone_number',
header: "Phone Number",
displayProperty: "phone_number",
sortProperty: "phone_number",
onClickItemFunction: (value) => console.log(value),
},
{
header: 'Username',
displayProperty: 'username',
sortProperty: 'username',
header: "Username",
displayProperty: "username",
sortProperty: "username",
mapFunction: (item) => `test-${item.summary.username}`,
},
]}
/>
<HalTable
collectionUrl={"http://localhost:3001/policies"}
columns={[
{
header: "Email",
displayProperty: "email",
sortProperty: "email",
},
{
header: "Phone Number",
displayProperty: "phone_number",
sortProperty: "phone_number",
onClickItemFunction: (value) => console.log(value),
},
{
header: "Username",
displayProperty: "username",
sortProperty: "username",
mapFunction: (item) => `test-${item.summary.username}`,
},
]}
Expand Down
3 changes: 2 additions & 1 deletion lib/src/components/HalTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ const HalTable = ({
headers,
columns,
itemsPerPage = 5,
mode = "default",
}: HalTableProps): JSX.Element => {
const {
isLoading,
Expand All @@ -118,7 +119,7 @@ const HalTable = ({

return (
<>
<DxcTable>
<DxcTable mode={mode}>
<thead>
<tr>
{columns.map((column) => (
Expand Down
10 changes: 8 additions & 2 deletions lib/src/components/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ type Column = {
*/
sortProperty: string;
/**
* Callback function that will be executed when the user clicks an item in that column.
* Callback function that will be executed when the user clicks an item in that column.
* The collection item will be passed to this function when executed.
*/
onClickItemFunction?: (item: any) => void;
/**
* Callback function that must return the value to be rendered in that column for a specific item.
* Callback function that must return the value to be rendered in that column for a specific item.
* The item will be passed to this function as a parameter.
*/
mapFunction?: (item: any) => string;
Expand Down Expand Up @@ -49,6 +49,12 @@ export type HalTableProps = {
* Array of objects specifying the columns to be displayed in the table.
*/
columns: Column[];
/**
* Determines the visual style and layout
* - "default": Default table size.
* - "reduced": More compact table with less spacing for high density information.
*/
mode?: "default" | "reduced";
};

export type HalAutocompleteProps = React.ComponentProps<typeof DxcTextInput> & {
Expand Down
Loading