Skip to content

Commit

Permalink
Merge branch 'feat/table' into feature/pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
@eugene028
eugene028 committed Sep 22, 2024
2 parents 1bc0b23 + 4b0310c commit fbb8ab0
Show file tree
Hide file tree
Showing 16 changed files with 443 additions and 371 deletions.
48 changes: 24 additions & 24 deletions packages/wow-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,30 +40,30 @@
"require": "./dist/Table.cjs",
"import": "./dist/Table.js"
},
"./TableBodyContainer": {
"types": "./dist/components/Table/TableBodyContainer.d.ts",
"require": "./dist/TableBodyContainer.cjs",
"import": "./dist/TableBodyContainer.js"
},
"./TableCell": {
"types": "./dist/components/Table/TableCell.d.ts",
"require": "./dist/TableCell.cjs",
"import": "./dist/TableCell.js"
},
"./TableContainer": {
"types": "./dist/components/Table/TableContainer.d.ts",
"require": "./dist/TableContainer.cjs",
"import": "./dist/TableContainer.js"
},
"./TableHeader": {
"types": "./dist/components/Table/TableHeader.d.ts",
"require": "./dist/TableHeader.cjs",
"import": "./dist/TableHeader.js"
},
"./TableRow": {
"types": "./dist/components/Table/TableRow.d.ts",
"require": "./dist/TableRow.cjs",
"import": "./dist/TableRow.js"
"./Tbody": {
"types": "./dist/components/Table/Tbody.d.ts",
"require": "./dist/Tbody.cjs",
"import": "./dist/Tbody.js"
},
"./Td": {
"types": "./dist/components/Table/Td.d.ts",
"require": "./dist/Td.cjs",
"import": "./dist/Td.js"
},
"./Th": {
"types": "./dist/components/Table/Th.d.ts",
"require": "./dist/Th.cjs",
"import": "./dist/Th.js"
},
"./Thead": {
"types": "./dist/components/Table/Thead.d.ts",
"require": "./dist/Thead.cjs",
"import": "./dist/Thead.js"
},
"./Tr": {
"types": "./dist/components/Table/Tr.d.ts",
"require": "./dist/Tr.cjs",
"import": "./dist/Tr.js"
},
"./Switch": {
"types": "./dist/components/Switch/index.d.ts",
Expand Down
10 changes: 5 additions & 5 deletions packages/wow-ui/rollup.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@ export default {
TextButton: "./src/components/TextButton",
Tag: "./src/components/Tag",
Table: "./src/components/Table/Table",
TableBodyContainer: "./src/components/Table/TableBodyContainer",
TableCell: "./src/components/Table/TableCell",
TableContainer: "./src/components/Table/TableContainer",
TableHeader: "./src/components/Table/TableHeader",
TableRow: "./src/components/Table/TableRow",
Tbody: "./src/components/Table/Tbody",
Td: "./src/components/Table/Td",
Th: "./src/components/Table/Th",
Thead: "./src/components/Table/Thead",
Tr: "./src/components/Table/Tr",
Switch: "./src/components/Switch",
Stepper: "./src/components/Stepper",
BlueSpinner: "./src/components/Spinner/BlueSpinner",
Expand Down
165 changes: 80 additions & 85 deletions packages/wow-ui/src/components/Table/Table.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,6 @@ const meta = {
},
},
argTypes: {
data: {
description: "테이블 컴포넌트에 나타낼 데이터의 배열입니다.",
table: {
type: { summary: "T[]" },
},
},
tableHeaderResource: {
description:
"테이블 헤더에 나타낼 배열과 데이터의 키 값을 담은 배열입니다.",
table: {
type: { summary: "{ key: keyof T; text: string }[]" },
},
},
tableCaption: {
description: "테이블에 대한 설명을 나타내는 캡션입니다.",
table: {
Expand All @@ -40,26 +27,26 @@ const meta = {
type: "text",
},
},
options: {
description: "테이블에 대한 상세한 옵션값을 설정합니다.",
showCheckbox: {
description: "테이블에 체크박스를 나타냅니다.",
table: {
type: { summary: "TableOptionProps<T>" },
type: { summary: "boolean" },
},
control: {
type: "object",
type: "boolean",
},
},
selectedRows: {
selectedRowsProp: {
description:
"default 값을 설정하거나, 외부에서 table의 체크 상태 관리할 수 있는 변수입니다.",
table: {
type: { summary: "T[]" },
type: { summary: "number[]" },
},
},
onChange: {
description: "외부 활성 상태가 변경될 때 호출되는 함수입니다.",
table: {
type: { summary: "(selectedRows: T[]) => void" },
type: { summary: "(selectedRows: number[]) => void" },
},
},
className: {
Expand Down Expand Up @@ -100,13 +87,22 @@ export const Primary: Story = {
{ id: 3, name: "김민지", studyId: "C234567", birth: "2004" },
];
return (
<Table
data={data}
tableHeaderResource={[
{ key: "name", text: "이름" },
{ key: "studyId", text: "학번" },
]}
/>
<Table>
<Table.Thead>
<Table.Th>이름</Table.Th>
<Table.Th>학번</Table.Th>
</Table.Thead>
<Table.Tbody>
{data.map(({ name, studyId, id }) => {
return (
<Table.Tr key={id} value={id}>
<Table.Td>{name}</Table.Td>
<Table.Td>{studyId}</Table.Td>
</Table.Tr>
);
})}
</Table.Tbody>
</Table>
);
},
};
Expand Down Expand Up @@ -161,20 +157,24 @@ export const ScrollTable: Story = {
},
];
return (
<Table
data={data}
style={{ maxWidth: "400px", maxHeight: "180px" }}
options={{
showCheckbox: true,
uniqueKey: "id",
}}
tableHeaderResource={[
{ key: "name", text: "이름" },
{ key: "studyId", text: "학번" },
{ key: "discordname", text: "디스코드 닉네임" },
{ key: "button", text: "버튼" },
]}
/>
<Table fullWidth={true} style={{ maxWidth: "300px", maxHeight: "150px" }}>
<Table.Thead>
<Table.Th>이름</Table.Th>
<Table.Th>학번</Table.Th>
<Table.Th>버튼</Table.Th>
</Table.Thead>
<Table.Tbody>
{data.map(({ name, studyId, button, id }) => {
return (
<Table.Tr key={id} value={id}>
<Table.Td>{name}</Table.Td>
<Table.Td>{studyId}</Table.Td>
<Table.Td>{button}</Table.Td>
</Table.Tr>
);
})}
</Table.Tbody>
</Table>
);
},
};
Expand Down Expand Up @@ -229,41 +229,31 @@ export const CheckableTable: Story = {
},
];
return (
<Table
data={data}
options={{
showCheckbox: true,
uniqueKey: "id",
}}
tableHeaderResource={[
{ key: "name", text: "이름" },
{ key: "studyId", text: "학번" },
{ key: "discordname", text: "디스코드 닉네임" },
{ key: "button", text: "버튼" },
]}
/>
<Table showCheckbox={true}>
<Table.Thead>
<Table.Th>이름</Table.Th>
<Table.Th>학번</Table.Th>
<Table.Th>버튼</Table.Th>
</Table.Thead>
<Table.Tbody>
{data.map(({ name, studyId, button, id }) => {
return (
<Table.Tr key={id} value={id}>
<Table.Td>{name}</Table.Td>
<Table.Td>{studyId}</Table.Td>
<Table.Td>{button}</Table.Td>
</Table.Tr>
);
})}
</Table.Tbody>
</Table>
);
},
};

const ControlledTable = () => {
const selectedProps = [
{
id: 3,
name: "김민지",
studyId: "C234567",
discordname: "minijjang",
birth: "2004",
},
{
id: 2,
name: "강해린",
discordname: "haerin111",
studyId: "C011111",
birth: "2006",
},
];
const [selectedRows, setSelectedRows] = useState<object[]>(selectedProps);
const selectedProps = [2, 3];
const [selectedRows, setSelectedRows] = useState<number[]>(selectedProps);
const data = [
{
id: 1,
Expand All @@ -287,7 +277,7 @@ const ControlledTable = () => {
birth: "2004",
},
];
const handleSelectionChange = (rows: object[]) => {
const handleSelectionChange = (rows: number[]) => {
setSelectedRows(rows);
};
return (
Expand All @@ -302,20 +292,25 @@ const ControlledTable = () => {
선택한 테이블 요소 모두 초기화
</Button>
<Table
data={data}
fullWidth={true}
selectedRows={selectedRows}
options={{
showCheckbox: true,
uniqueKey: "id",
}}
tableHeaderResource={[
{ key: "name", text: "이름" },
{ key: "studyId", text: "학번" },
{ key: "discordname", text: "디스코드 닉네임" },
]}
selectedRowsProp={selectedRows}
showCheckbox={true}
onChange={handleSelectionChange}
/>
>
<Table.Thead>
<Table.Th>이름</Table.Th>
<Table.Th>학번</Table.Th>
</Table.Thead>
<Table.Tbody>
{data.map(({ name, studyId, id }) => {
return (
<Table.Tr key={id} value={id}>
<Table.Td>{name}</Table.Td>
<Table.Td>{studyId}</Table.Td>
</Table.Tr>
);
})}
</Table.Tbody>
</Table>
</>
);
};
Expand Down
Loading

0 comments on commit fbb8ab0

Please sign in to comment.