@vectara/vectara-ui 15.3.1 → 15.4.0

package/lib/components/table/Table.js

@@ -136,7 +136,10 @@ export const VuiTable = (_a) => {
                                             onSelectRow(selectedRows);
                                         } }) }) }))), columns.map((column) => {
                                 const { name, render, className, testId } = column;
-                                return (_jsx("td", Object.assign({ className: className, "data-testid": typeof testId === "function" ? testId(row) : testId }, { children: _jsx(VuiTableCell, Object.assign({ column: column }, { children: render ? render(row, rowIndex) : row[column.name] })) }), name));
+                                const cellClasses = classNames(className, {
+                                    "vuiTableCell--truncate": column.truncate
+                                });
+                                return (_jsx("td", Object.assign({ className: cellClasses, "data-testid": typeof testId === "function" ? testId(row) : testId }, { children: _jsx(VuiTableCell, Object.assign({ column: column }, { children: render ? render(row, rowIndex) : row[column.name] })) }), name));
                             }), (actions || hasExpandableRows) && (_jsx("td", Object.assign({ className: "vuiTableRowActions" }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "end", spacing: "xs" }, { children: [actions && (_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiTableRowActions, { row: row, actions: actions, onToggle: (isSelected) => {
                                                     if (isSelected) {
                                                         setRowBeingActedUpon(row);

package/lib/components/table/_index.scss

@@ -97,6 +97,14 @@ $tableResponsiveBreakpointSmall: 500px;
       padding-right: $sizeXxl;
     }
 
+    // This enables truncated VuiText children to actually be truncated.
+    .vuiTableCell--truncate {
+      min-width: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
     tbody tr:not(.vuiTableRowExpandedContent) {
       position: relative;
       column-gap: $sizeM;

package/lib/components/table/types.d.ts

@@ -10,5 +10,6 @@ export type Column<T> = {
     render?: (row: T, rowIndex: number) => React.ReactNode;
     className?: string;
     testId?: string | ((row: T) => string);
+    truncate?: boolean;
 };
 export type OnSort = (column: string, direction: "asc" | "desc" | "none") => void;

package/lib/styles/index.css

@@ -5175,6 +5175,12 @@ h2.react-datepicker__current-month {
   .vuiTable--responsive .vuiTableRow--hasActions {
     padding-right: 40px;
   }
+  .vuiTable--responsive .vuiTableCell--truncate {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
   .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) {
     position: relative;
     column-gap: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "15.3.1",
+  "version": "15.4.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",

package/src/docs/pages/table/Table.tsx

@@ -13,16 +13,9 @@ import {
   VuiToggle
 } from "../../../lib";
 import { VuiTable } from "../../../lib/components/table/Table";
-import { createFakePeople } from "./createFakePeople";
+import { createFakePeople, Person } from "./createFakePeople";
 import { BiError } from "react-icons/bi";
 
-type Person = {
-  name: string;
-  id: string;
-  role: string[];
-  status: string;
-};
-
 const ROWS_PER_PAGE = 20;
 const people: Person[] = createFakePeople(152);
 
@@ -171,6 +164,20 @@ export const Table = () => {
         }
       }
     },
+    {
+      name: "description",
+      header: {
+        render: () => {
+          return "Description";
+        }
+      },
+      render: (person: Person) => (
+        <VuiText truncate>
+          <p>{person.description}</p>
+        </VuiText>
+      ),
+      truncate: true
+    },
     {
       name: "role",
       header: {
@@ -424,7 +431,6 @@ export const Table = () => {
         collapsedContent={
           hasExpandableRows
             ? (person: Person) => (
-              
                 <VuiText size="s">
                   <p>
                     <strong>Roles:</strong> {person.role.length > 0 ? person.role.join(", ") : "None assigned"}

package/src/docs/pages/table/createFakePeople.ts

@@ -1,3 +1,11 @@
+export type Person = {
+  name: string;
+  id: string;
+  role: string[];
+  status: string;
+  description: string;
+};
+
 const firstNames = [
   "John",
   "Jane",
@@ -56,6 +64,14 @@ const roles = [
   "Marketing"
 ] as const;
 
+const descriptions = [
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+  "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+  "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+] as const;
+
 const statuses = ["Active", "Inactive", "Pending"] as const;
 
 const getIndex = (max: number) => Math.floor(Math.random() * max);
@@ -82,6 +98,8 @@ const getRoles = () => {
 
 const getStatus = () => statuses[getIndex(statuses.length)];
 
+const getDescription = () => descriptions[getIndex(descriptions.length)];
+
 export const createFakePeople = (count: number) => {
   const fakePeople = [];
 
@@ -90,7 +108,8 @@ export const createFakePeople = (count: number) => {
       name: getName(),
       id: getId(),
       role: getRoles(),
-      status: getStatus()
+      status: getStatus(),
+      description: getDescription()
     });
   }