Task 980 table rows number (#22)

* chore: table rows select * chore: wip * chore: wip
odigos-io · Jul 4, 2024 · c48b851 · c48b851
1 parent 2d97639
commit c48b851
Show file tree

Hide file tree

Showing 7 changed files with 183 additions and 27 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/dist/index.mjs b/dist/index.mjs
@@ -243,7 +243,9 @@ var LANGUAGES_LOGOS = {
   // TODO: good icon
   processing: `${BASE_URL}default.svg`,
   // TODO: good icon
-  "no containers": `${BASE_URL}default.svg`
+  "no containers": `${BASE_URL}default.svg`,
+  // TODO: good icon
+  "no running pods": `${BASE_URL}default.svg`
   // TODO: good icon
 };
 
@@ -2939,6 +2941,27 @@ var StyledTable = styled39.table`
   border-spacing: 0;
 `;
 var StyledTbody = styled39.tbody``;
+var DropdownContainer = styled39.div`
+  margin: 10px 0;
+  gap: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+var Dropdown = styled39.select`
+  padding: 5px;
+  border-radius: 4px;
+  border: 1px solid ${palette_default.colors.blue_grey};
+  background-color: ${palette_default.colors.dark};
+  color: ${palette_default.colors.white};
+  border-radius: 8px;
+  cursor: pointer;
+  border: ${({ theme: theme2 }) => `1px solid  ${theme2.colors.blue_grey}`};
+`;
+var DropdownOption = styled39.option`
+  background-color: ${palette_default.colors.dark};
+  color: ${palette_default.colors.white};
+`;
 var Table3 = ({
   data,
   onPaginate,
@@ -2947,7 +2970,7 @@ var Table3 = ({
   renderEmptyResult
 }) => {
   const [currentPage, setCurrentPage] = useState15(1);
-  const [itemsPerPage, setItemsPerPage] = useState15(10);
+  const [itemsPerPage, setItemsPerPage] = useState15(15);
   const indexOfLastItem = currentPage * itemsPerPage;
   const indexOfFirstItem = indexOfLastItem - itemsPerPage;
   const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
@@ -2957,15 +2980,29 @@ var Table3 = ({
       onPaginate(pageNumber);
     }
   };
-  return /* @__PURE__ */ React105.createElement(React105.Fragment, null, /* @__PURE__ */ React105.createElement(StyledTable, null, renderTableHeader(), /* @__PURE__ */ React105.createElement(StyledTbody, null, currentItems.map((item, index) => renderTableRows(item, index)))), data.length === 0 ? renderEmptyResult() : data.length > 10 ? /* @__PURE__ */ React105.createElement(
+  const handleItemsPerPageChange = (event) => {
+    setItemsPerPage(Number(event.target.value));
+    setCurrentPage(1);
+  };
+  return /* @__PURE__ */ React105.createElement(React105.Fragment, null, /* @__PURE__ */ React105.createElement(DropdownContainer, null, /* @__PURE__ */ React105.createElement(Text, { size: 12, color: palette_default.text.light_grey }, "Showing ", indexOfFirstItem + 1, " to ", indexOfLastItem, " of ", data.length, " ", "items"), /* @__PURE__ */ React105.createElement(
+    Dropdown,
+    {
+      id: "itemsPerPage",
+      value: itemsPerPage,
+      onChange: handleItemsPerPageChange
+    },
+    /* @__PURE__ */ React105.createElement(DropdownOption, { value: 10 }, "10"),
+    /* @__PURE__ */ React105.createElement(DropdownOption, { value: 25 }, "25"),
+    /* @__PURE__ */ React105.createElement(DropdownOption, { value: 50 }, "50")
+  )), /* @__PURE__ */ React105.createElement(StyledTable, null, renderTableHeader(), /* @__PURE__ */ React105.createElement(StyledTbody, null, currentItems.map((item, index) => renderTableRows(item, index)))), data.length === 0 ? renderEmptyResult() : /* @__PURE__ */ React105.createElement(
     Pagination,
     {
       total: data.length,
       itemsPerPage,
       currentPage,
       onPageChange: handlePageChange
     }
-  ) : null);
+  ));
 };
 
 // src/design.system/yml.editor/index.tsx

diff --git a/dist/index.mjs.map b/dist/index.mjs.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@keyval-dev/design-system",
-  "version": "1.9.3",
+  "version": "1.9.7",
   "private": false,
   "scripts": {
     "dev": "next dev",

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Checkbox, DataFlow, MultiInputTable } from '@/design.system';
+import { Checkbox, DataFlow, MultiInputTable, Table } from '@/design.system';
 import { edges, nodes } from '@/design.system/data.flow/builder';
 import React from 'react';
 
@@ -16,6 +16,20 @@ export default function Home() {
         required
         onValuesChange={(newValues: string[]) => setValues(newValues)}
       />
+      <div>
+        <Table
+          data={[
+            1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 1, 1, 1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1,
+            1, 1, 1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 1, 1, 1, 1, 2, 3, 4, 5, 6, 7,
+            8, 9, 1, 1, 1, 1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 1, 1, 1, 1, 2, 3, 4,
+            5, 6, 7, 8, 9, 1, 1, 1, 1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 1, 1, 1, 1,
+            2, 3, 4, 5, 6, 7, 8, 9, 1, 1, 1, 1,
+          ]}
+          renderTableHeader={() => <div>Header</div>}
+          renderTableRows={() => <div>Row</div>}
+          renderEmptyResult={() => <div>Empty</div>}
+        />
+      </div>
       <div>
         <Checkbox
           label="I agree to the terms and conditions"

diff --git a/src/design.system/table/index.tsx b/src/design.system/table/index.tsx
@@ -2,8 +2,8 @@ import theme from '@/styles/palette';
 import styled from 'styled-components';
 import React, { useState } from 'react';
 import { Pagination } from '../pagination';
+import { Text } from '../text/text';
 
-// Updated TableProps to be generic
 type TableProps<T> = {
   data: T[];
   renderTableHeader: () => JSX.Element;
@@ -23,6 +23,30 @@ const StyledTable = styled.table`
 
 const StyledTbody = styled.tbody``;
 
+const DropdownContainer = styled.div`
+  margin: 10px 0;
+  gap: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+
+const Dropdown = styled.select`
+  padding: 5px;
+  border-radius: 4px;
+  border: 1px solid ${theme.colors.blue_grey};
+  background-color: ${theme.colors.dark};
+  color: ${theme.colors.white};
+  border-radius: 8px;
+  cursor: pointer;
+  border: ${({ theme }) => `1px solid  ${theme.colors.blue_grey}`};
+`;
+
+const DropdownOption = styled.option`
+  background-color: ${theme.colors.dark};
+  color: ${theme.colors.white};
+`;
+
 // Applying generic type T to the Table component
 export const Table = <T,>({
   data,
@@ -32,7 +56,7 @@ export const Table = <T,>({
   renderEmptyResult,
 }: TableProps<T>) => {
   const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage, setItemsPerPage] = useState(10);
+  const [itemsPerPage, setItemsPerPage] = useState(15);
 
   const indexOfLastItem = currentPage * itemsPerPage;
   const indexOfFirstItem = indexOfLastItem - itemsPerPage;
@@ -45,8 +69,31 @@ export const Table = <T,>({
     }
   };
 
+  const handleItemsPerPageChange = (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    setItemsPerPage(Number(event.target.value));
+    setCurrentPage(1); // Reset to the first page whenever items per page changes
+  };
+
   return (
     <>
+      <DropdownContainer>
+        <Text size={12} color={theme.text.light_grey}>
+          Showing {indexOfFirstItem + 1} to {indexOfLastItem} of {data.length}{' '}
+          items
+        </Text>
+        <Dropdown
+          id="itemsPerPage"
+          value={itemsPerPage}
+          onChange={handleItemsPerPageChange}
+        >
+          <DropdownOption value={10}>10</DropdownOption>
+          <DropdownOption value={25}>25</DropdownOption>
+          <DropdownOption value={50}>50</DropdownOption>
+        </Dropdown>
+      </DropdownContainer>
+
       <StyledTable>
         {renderTableHeader()}
         <StyledTbody>
@@ -56,14 +103,14 @@ export const Table = <T,>({
 
       {data.length === 0 ? (
         renderEmptyResult()
-      ) : data.length > 10 ? (
+      ) : (
         <Pagination
           total={data.length}
           itemsPerPage={itemsPerPage}
           currentPage={currentPage}
           onPageChange={handlePageChange}
         />
-      ) : null}
+      )}
     </>
   );
 };