Skip to content

Commit

Permalink
Add select option to simple table (#197)
Browse files Browse the repository at this point in the history
* Add select option to simple table

* Add tablerow type changes

* Add Table changes

* Update table styling

* change cells to items

* Rename cells to items

* Fix incorrect assignment

* Optimize table code

* Update border token

* Update items to have index passed onSelect

* Update naming of onSelect props

* Optimise Table code

* Fix incorrect assignment
vineethasok authored Nov 8, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 5c15857 commit 65440e7
Showing 6 changed files with 344 additions and 45 deletions.
24 changes: 24 additions & 0 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -32,10 +32,30 @@ import {
Select,
Text,
EllipsisContent,
Table,
} from "@/components";
import { Dialog } from "@/components/Dialog/Dialog";
import ConfirmationDialog from "@/components/ConfirmationDialog/ConfirmationDialog";

const headers = [{ label: "Company" }, { label: "Contact" }, { label: "Country" }];
const rows = [
{
id: "row-1",
items: [
{ label: "Alfreds Futterkiste" },
{ label: "Maria Anders" },
{ label: "Germany" },
],
},
{
id: "row-2",
items: [
{ label: "Centro comercial Moctezuma" },
{ label: "Francisco Chang" },
{ label: "Mexico" },
],
},
];
const App = () => {
const [currentTheme, setCurrentTheme] = useState<ThemeName>("dark");
const [selectedButton, setSelectedButton] = useState("center1");
@@ -430,6 +450,10 @@ const App = () => {
faucibus mi egestas interdum.
</EllipsisContent>
</ClickUIProvider>
<Table
headers={headers}
rows={rows}
/>
</div>
);
};
29 changes: 23 additions & 6 deletions src/components/Table/Table.stories.tsx
Original file line number Diff line number Diff line change
@@ -2,23 +2,40 @@ import { Table } from "./Table";

const headers = [{ label: "Company" }, { label: "Contact" }, { label: "Country" }];
const rows = [
[{ label: "Alfreds Futterkiste" }, { label: "Maria Anders" }, { label: "Germany" }],
[
{ label: "Centro comercial Moctezuma" },
{ label: "Francisco Chang" },
{ label: "Mexico" },
],
{
id: "row-1",
items: [
{ label: "Alfreds Futterkiste" },
{ label: "Maria Anders" },
{ label: "Germany" },
],
},
{
id: "row-2",
items: [
{ label: "Centro comercial Moctezuma" },
{ label: "Francisco Chang" },
{ label: "Mexico" },
],
},
];

export default {
component: Table,
title: "Display/Table",
tags: ["table", "autodocs"],
argTypes: {
selectedIds: {
control: { type: "object" },
if: { arg: "isSelectable", exists: true },
},
},
};

export const Playground = {
args: {
headers,
rows,
selectedIds: [],
},
};
71 changes: 71 additions & 0 deletions src/components/Table/Table.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { fireEvent } from "@testing-library/react";
import { Table, TableProps } from "./Table";
import { renderCUI } from "@/utils/test-utils";

const headers = [{ label: "Company" }, { label: "Contact" }, { label: "Country" }];

const rows = [
{
id: "row-1",
items: [
{ label: "Alfreds Futterkiste" },
{ label: "Maria Anders" },
{ label: "Germany" },
],
},
{
id: "row-2",
items: [
{ label: "Centro comercial Moctezuma" },
{ label: "Francisco Chang" },
{ label: "Mexico" },
],
},
];

describe("Table", () => {
const renderTable = (props: Omit<TableProps, "headers" | "rows">) =>
renderCUI(
<Table
headers={headers}
rows={rows}
data-testid="table"
{...props}
/>
);

it("should render the Table", () => {
const { queryByTestId } = renderTable({});
expect(queryByTestId("table")).not.toBeNull();
expect(queryByTestId("checkbox")).toBeNull();
});

it("should show checkbox on isSelectable", () => {
const { queryByTestId, queryAllByTestId } = renderTable({
isSelectable: true,
selectedIds: [],
});
expect(queryByTestId("table")).not.toBeNull();
expect(queryAllByTestId("checkbox")[0]).not.toBeNull();
expect(queryAllByTestId("checkbox")[1]).not.toBeNull();
});

it("should trigger onSelect on clicking checkbox", () => {
const onSelect = jest.fn();
const { queryByTestId, queryAllByTestId } = renderTable({
isSelectable: true,
selectedIds: [],
onSelect,
});
expect(queryByTestId("table")).not.toBeNull();
expect(queryAllByTestId("checkbox")).toHaveLength(4);
const selectAllCheckbox = queryAllByTestId("checkbox")[1];
const rowCheckbox = queryAllByTestId("checkbox")[2];
expect(selectAllCheckbox).not.toBeNull();
fireEvent.click(selectAllCheckbox);
expect(onSelect).toBeCalledTimes(1);
expect(rowCheckbox).not.toBeNull();
fireEvent.click(selectAllCheckbox);
expect(onSelect).toBeCalledTimes(2);
});
});
Loading

1 comment on commit 65440e7

@vercel
Copy link

@vercel vercel bot commented on 65440e7 Nov 8, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

click-ui – ./

click-ui.vercel.app
click-ui-clickhouse.vercel.app
click-ui-git-main-clickhouse.vercel.app

Please sign in to comment.