@dust-tt/sparkle 0.2.204 → 0.2.206
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/DataTable.d.ts +3 -1
- package/dist/cjs/index.js +3 -3
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/DataTable.d.ts +3 -1
- package/dist/esm/index.js +3 -3
- package/dist/esm/index.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/DataTable.tsx +18 -2
- package/src/stories/DataTable.stories.tsx +3 -0
package/package.json
CHANGED
|
@@ -249,6 +249,8 @@ DataTable.Row = function Row({
|
|
|
249
249
|
interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
|
|
250
250
|
avatarUrl?: string;
|
|
251
251
|
icon?: React.ComponentType<{ className?: string }>;
|
|
252
|
+
iconClassName?: string;
|
|
253
|
+
roundedAvatar?: boolean;
|
|
252
254
|
children?: ReactNode;
|
|
253
255
|
description?: string;
|
|
254
256
|
}
|
|
@@ -257,7 +259,9 @@ DataTable.Cell = function Cell({
|
|
|
257
259
|
children,
|
|
258
260
|
className,
|
|
259
261
|
avatarUrl,
|
|
262
|
+
roundedAvatar,
|
|
260
263
|
icon,
|
|
264
|
+
iconClassName,
|
|
261
265
|
description,
|
|
262
266
|
...props
|
|
263
267
|
}: CellProps) {
|
|
@@ -271,10 +275,22 @@ DataTable.Cell = function Cell({
|
|
|
271
275
|
>
|
|
272
276
|
<div className="s-flex">
|
|
273
277
|
{avatarUrl && (
|
|
274
|
-
<Avatar
|
|
278
|
+
<Avatar
|
|
279
|
+
visual={avatarUrl}
|
|
280
|
+
size="xs"
|
|
281
|
+
className="s-mr-2"
|
|
282
|
+
isRounded={roundedAvatar ?? false}
|
|
283
|
+
/>
|
|
275
284
|
)}
|
|
276
285
|
{icon && (
|
|
277
|
-
<Icon
|
|
286
|
+
<Icon
|
|
287
|
+
visual={icon}
|
|
288
|
+
size="sm"
|
|
289
|
+
className={classNames(
|
|
290
|
+
"s-mr-2 s-text-element-600",
|
|
291
|
+
iconClassName || ""
|
|
292
|
+
)}
|
|
293
|
+
/>
|
|
278
294
|
)}
|
|
279
295
|
<div className="s-flex">
|
|
280
296
|
<span className="s-text-sm s-text-element-800">{children}</span>
|
|
@@ -22,6 +22,7 @@ type Data = {
|
|
|
22
22
|
icon?: React.ComponentType<{ className?: string }>;
|
|
23
23
|
onClick?: () => void;
|
|
24
24
|
onMoreClick?: () => void;
|
|
25
|
+
roundedAvatar?: boolean;
|
|
25
26
|
};
|
|
26
27
|
|
|
27
28
|
export const DataTableExample = () => {
|
|
@@ -34,6 +35,7 @@ export const DataTableExample = () => {
|
|
|
34
35
|
lastUpdated: "July 8, 2023",
|
|
35
36
|
size: "32kb",
|
|
36
37
|
avatarUrl: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
|
|
38
|
+
roundedAvatar: true,
|
|
37
39
|
onClick: () => console.log("hehe"),
|
|
38
40
|
onMoreClick: () => console.log("show more"),
|
|
39
41
|
},
|
|
@@ -77,6 +79,7 @@ export const DataTableExample = () => {
|
|
|
77
79
|
avatarUrl={info.row.original.avatarUrl}
|
|
78
80
|
icon={info.row.original.icon}
|
|
79
81
|
description={info.row.original.description}
|
|
82
|
+
roundedAvatar={info.row.original.roundedAvatar}
|
|
80
83
|
>
|
|
81
84
|
{info.row.original.name}
|
|
82
85
|
</DataTable.Cell>
|