Merge pull request moaijs#103 from tuhuynh27/feature/table-row-compac…

…t-height

Feat(core): Table row with compact height

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
 .DS_Store
+.idea

core/src/table/table.module.css

@@ -51,3 +51,53 @@ in native HTML */
 .container tr:last-child td {
 	border-bottom-style: none;
 }
+
+/* Cell spacing */
+
+/* Medium */
+.medium th,
+.medium td {
+	padding: 12px 8px;
+}
+
+.medium td:first-child,
+.medium th:first-child {
+	padding-left: 16px;
+}
+
+.medium td:last-child,
+.medium th:last-child {
+	padding-right: 16px;
+}
+
+.small th,
+.small td {
+	padding: 8px 6px;
+}
+
+/* Small */
+.small td:first-child,
+.small th:first-child {
+	padding-left: 12px;
+}
+
+.small td:last-child,
+.small th:last-child {
+	padding-right: 12px;
+}
+
+/* Large */
+.large th,
+.large td {
+	padding: 16px 12px;
+}
+
+.large td:first-child,
+.large th:first-child {
+	padding-left: 24px;
+}
+
+.large td:last-child,
+.large th:last-child {
+	padding-right: 24px;
+}

core/src/table/table.stories.tsx

@@ -154,3 +154,19 @@ It should be a function that returns what to be rendered when the user expands
 a row. The returned result is rendered below the row, spanning all columns
 (i.e. a \`td\` with \`colSpan={columns.length}\`).
 `);
+
+export const SizedTable = () => (
+	<Table<Robot>
+		rows={ROBOTS.slice(0, 3)}
+		rowKey={(robot) => robot.id.toString()}
+		columns={[
+			{ title: "Bot", className: "name", render: "MAC" },
+			{ title: "Id", render: "id" },
+		]}
+		size={Table.sizes.small}
+	/>
+)
+
+_Story.desc(SizedTable)(`
+User can also define table cell size with \`size\` prop.
+`);

core/src/table/table.tsx

@@ -29,6 +29,10 @@ export interface TableColumn<R> {
 		| ((row: R, index: number) => ReactNode); // Render function;
 }
 
+export type TableSize = {
+	cell: string;
+};
+
 export interface TableProps<R> {
 	/**
 	 * An array of [generic][1] items to render as rows of the table (e.g. a
@@ -68,6 +72,10 @@ export interface TableProps<R> {
 	 *	 when you want to make the table takes 100% of its container width
 	 */
 	fill?: boolean;
+	/**
+	 * Size of the table. Choose one from Table.sizes.
+	 */
+	size?: TableSize;
 }
 
 const thCls = [border.weak, background.weak, text.strong].join(" ");
@@ -107,6 +115,7 @@ export const Table = <R,>(props: TableProps<R>) => {
 				props.fixed ? fixed.container : "",
 				props.fill ? s.containerFill : "",
 				background.strong,
+				props.size?.cell ?? Table.sizes.medium.cell
 			].join(" ")}
 		>
 			<thead>
@@ -116,3 +125,9 @@ export const Table = <R,>(props: TableProps<R>) => {
 		</table>
 	);
 };
+
+Table.sizes = {
+	large: { cell: s.large } as TableSize,
+	medium: { cell: s.medium } as TableSize,
+	small: { cell: s.small } as TableSize,
+}