@mrshmllw/smores-react 12.6.1 → 12.7.0
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/Table/Table.d.ts +1 -1
- package/dist/Table/Table.js +5 -3
- package/dist/Table/Table.js.map +1 -1
- package/dist/Table/components/TableFooter.d.ts +8 -0
- package/dist/Table/components/TableFooter.js +10 -0
- package/dist/Table/components/TableFooter.js.map +1 -0
- package/dist/Table/types.d.ts +25 -1
- package/dist/Table/types.js.map +1 -1
- package/package.json +3 -3
package/dist/Table/Table.d.ts
CHANGED
|
@@ -13,4 +13,4 @@ import { TableProps } from './types';
|
|
|
13
13
|
* ## Improvements:
|
|
14
14
|
* - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this
|
|
15
15
|
*/
|
|
16
|
-
export declare const Table: <T extends object>({ columns, data, fixedHeader, hasKeyline, expandable, subTable, subRows, headerHeight, headerColor, rowColor, stripedColor, rowBorderColor, rowActions, clickableRow, rowPadding, columnPadding, noDataContent, roundedTable, hideTableHeader, }: TableProps<T>) => React.JSX.Element;
|
|
16
|
+
export declare const Table: <T extends object, K extends object>({ columns, data, fixedHeader, hasKeyline, expandable, subTable, subRows, headerHeight, headerColor, rowColor, footer, stripedColor, rowBorderColor, rowActions, clickableRow, rowPadding, columnPadding, noDataContent, roundedTable, hideTableHeader, }: TableProps<T, K>) => React.JSX.Element;
|
package/dist/Table/Table.js
CHANGED
|
@@ -3,6 +3,7 @@ import { Text } from '../Text';
|
|
|
3
3
|
import { TableHeader } from './components/TableHeader';
|
|
4
4
|
import { TableRow } from './components/TableRow';
|
|
5
5
|
import { StyledCell, StyledTable } from './components/commonComponents';
|
|
6
|
+
import { TableFooter } from './components/TableFooter';
|
|
6
7
|
/**
|
|
7
8
|
* A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.
|
|
8
9
|
*
|
|
@@ -16,7 +17,7 @@ import { StyledCell, StyledTable } from './components/commonComponents';
|
|
|
16
17
|
* ## Improvements:
|
|
17
18
|
* - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this
|
|
18
19
|
*/
|
|
19
|
-
export const Table = ({ columns, data, fixedHeader = true, hasKeyline = false, expandable, subTable, subRows, headerHeight, headerColor = 'mascarpone', rowColor = 'custard', stripedColor, rowBorderColor = 'oatmeal', rowActions, clickableRow, rowPadding, columnPadding, noDataContent, roundedTable, hideTableHeader = false, }) => {
|
|
20
|
+
export const Table = ({ columns, data, fixedHeader = true, hasKeyline = false, expandable, subTable, subRows, headerHeight, headerColor = 'mascarpone', rowColor = 'custard', footer, stripedColor, rowBorderColor = 'oatmeal', rowActions, clickableRow, rowPadding, columnPadding, noDataContent, roundedTable, hideTableHeader = false, }) => {
|
|
20
21
|
const showActionsCell = expandable ?? rowActions;
|
|
21
22
|
const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
|
|
22
23
|
return (React.createElement(StyledTable, { "$roundedTable": roundedTable },
|
|
@@ -25,7 +26,8 @@ export const Table = ({ columns, data, fixedHeader = true, hasKeyline = false, e
|
|
|
25
26
|
React.createElement("tbody", null,
|
|
26
27
|
data.length === 0 && (React.createElement("tr", null,
|
|
27
28
|
React.createElement(StyledCell, { colSpan: expandSubProp, "$rowPadding": rowPadding, "$columnPadding": columnPadding }, noDataContent ?? React.createElement(Text, { align: "center" }, "No available data")))),
|
|
28
|
-
data.length !== 0 &&
|
|
29
|
-
data.map((row, rowIndex) => (React.createElement(TableRow, { key: rowIndex, rowData: row, rowIndex: rowIndex, columns: columns, rowActions: rowActions, stripedColor: stripedColor, subTable: subTable, subRows: subRows, rowColor: rowColor, rowBorderColor: rowBorderColor, rowPadding: rowPadding, columnPadding: columnPadding, expandable: expandable, clickableRow: clickableRow, hideBorder: Boolean(roundedTable) && rowIndex === data.length - 1 })))
|
|
29
|
+
data.length !== 0 && (React.createElement(React.Fragment, null,
|
|
30
|
+
data.map((row, rowIndex) => (React.createElement(TableRow, { key: rowIndex, rowData: row, rowIndex: rowIndex, columns: columns, rowActions: rowActions, stripedColor: stripedColor, subTable: subTable, subRows: subRows, rowColor: rowColor, rowBorderColor: rowBorderColor, rowPadding: rowPadding, columnPadding: columnPadding, expandable: expandable, clickableRow: clickableRow, hideBorder: Boolean(roundedTable) && rowIndex === data.length - 1 }))),
|
|
31
|
+
footer && (React.createElement(TableFooter, { columnCount: columns.length, footer: footer })))))));
|
|
30
32
|
};
|
|
31
33
|
//# sourceMappingURL=Table.js.map
|
package/dist/Table/Table.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;
|
|
1
|
+
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAEvE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAqC,EACxD,OAAO,EACP,IAAI,EACJ,WAAW,GAAG,IAAI,EAClB,UAAU,GAAG,KAAK,EAClB,UAAU,EACV,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,WAAW,GAAG,YAAY,EAC1B,QAAQ,GAAG,SAAS,EACpB,MAAM,EACN,YAAY,EACZ,cAAc,GAAG,SAAS,EAC1B,UAAU,EACV,YAAY,EACZ,UAAU,EACV,aAAa,EACb,aAAa,EACb,YAAY,EACZ,eAAe,GAAG,KAAK,GACN,EAAE,EAAE;IACrB,MAAM,eAAe,GAAG,UAAU,IAAI,UAAU,CAAA;IAChD,MAAM,aAAa,GAAG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAA;IAC3E,OAAO,CACL,oBAAC,WAAW,qBAAgB,YAAY;QACrC,CAAC,eAAe,IAAI,CACnB;YACE,oBAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB,CACI,CACT;QACD;YACG,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CACpB;gBACE,oBAAC,UAAU,IACT,OAAO,EAAE,aAAa,iBACT,UAAU,oBACP,aAAa,IAE5B,aAAa,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,wBAAyB,CACpD,CACV,CACN;YACA,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CACpB;gBACG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC3B,oBAAC,QAAQ,IACP,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,GAAG,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,UAAU,EACR,OAAO,CAAC,YAAY,CAAC,IAAI,QAAQ,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,GAEvD,CACH,CAAC;gBAED,MAAM,IAAI,CACT,oBAAC,WAAW,IAAC,WAAW,EAAE,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAI,CAC7D,CACA,CACJ,CACK,CACI,CACf,CAAA;AACH,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { Text } from '../Text'\nimport { TableHeader } from './components/TableHeader'\nimport { TableRow } from './components/TableRow'\nimport { StyledCell, StyledTable } from './components/commonComponents'\nimport { TableProps } from './types'\nimport { TableFooter } from './components/TableFooter'\n\n/**\n * A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.\n *\n * ## Caveats:\n * - `subRows` should always have the same columns as the Parent table\n * - `stripedColor` wont be applied to `subRows` or `subTables`\n * - `rowActions` will always need an `onClick`, this will be automatically passed onto the `ReactNode` you place & will be selectable\n * - Rows will scale depending on the cell content size\n * - Using `clickableRow` with clickable cells, ensure you use `e.stopPropagation` in your cells `onClick`\n *\n * ## Improvements:\n * - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this\n */\nexport const Table = <T extends object, K extends object>({\n columns,\n data,\n fixedHeader = true,\n hasKeyline = false,\n expandable,\n subTable,\n subRows,\n headerHeight,\n headerColor = 'mascarpone',\n rowColor = 'custard',\n footer,\n stripedColor,\n rowBorderColor = 'oatmeal',\n rowActions,\n clickableRow,\n rowPadding,\n columnPadding,\n noDataContent,\n roundedTable,\n hideTableHeader = false,\n}: TableProps<T, K>) => {\n const showActionsCell = expandable ?? rowActions\n const expandSubProp = showActionsCell ? columns.length + 1 : columns.length\n return (\n <StyledTable $roundedTable={roundedTable}>\n {!hideTableHeader && (\n <thead>\n <TableHeader\n columns={columns}\n fixedHeader={fixedHeader}\n headerHeight={headerHeight}\n subTable={subTable}\n headerColor={headerColor}\n rowActions={rowActions}\n columnPadding={columnPadding}\n expandable={expandable}\n hasKeyline={hasKeyline}\n />\n </thead>\n )}\n <tbody>\n {data.length === 0 && (\n <tr>\n <StyledCell\n colSpan={expandSubProp}\n $rowPadding={rowPadding}\n $columnPadding={columnPadding}\n >\n {noDataContent ?? <Text align=\"center\">No available data</Text>}\n </StyledCell>\n </tr>\n )}\n {data.length !== 0 && (\n <>\n {data.map((row, rowIndex) => (\n <TableRow\n key={rowIndex}\n rowData={row}\n rowIndex={rowIndex}\n columns={columns}\n rowActions={rowActions}\n stripedColor={stripedColor}\n subTable={subTable}\n subRows={subRows}\n rowColor={rowColor}\n rowBorderColor={rowBorderColor}\n rowPadding={rowPadding}\n columnPadding={columnPadding}\n expandable={expandable}\n clickableRow={clickableRow}\n hideBorder={\n Boolean(roundedTable) && rowIndex === data.length - 1\n }\n />\n ))}\n\n {footer && (\n <TableFooter columnCount={columns.length} footer={footer} />\n )}\n </>\n )}\n </tbody>\n </StyledTable>\n )\n}\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { TableFooter } from '../types';
|
|
3
|
+
type Props<K> = {
|
|
4
|
+
footer: TableFooter<K>;
|
|
5
|
+
columnCount: number;
|
|
6
|
+
};
|
|
7
|
+
export declare function TableFooter<K extends object>({ footer, columnCount, }: Props<K>): React.JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TableRow } from './TableRow';
|
|
3
|
+
export function TableFooter({ footer, columnCount, }) {
|
|
4
|
+
if ('element' in footer) {
|
|
5
|
+
return React.createElement("td", { colSpan: columnCount }, footer.element);
|
|
6
|
+
}
|
|
7
|
+
const { rowColor = 'custard', data, columns, ...restFooter } = footer;
|
|
8
|
+
return (React.createElement(TableRow, { key: "footer", rowIndex: columns.length - 1, rowColor: rowColor, rowData: data, columns: columns, ...restFooter }));
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=TableFooter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableFooter.js","sourceRoot":"","sources":["../../../src/Table/components/TableFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAOrC,MAAM,UAAU,WAAW,CAAmB,EAC5C,MAAM,EACN,WAAW,GACF;IACT,IAAI,SAAS,IAAI,MAAM,EAAE,CAAC;QACxB,OAAO,4BAAI,OAAO,EAAE,WAAW,IAAG,MAAM,CAAC,OAAO,CAAM,CAAA;IACxD,CAAC;IAED,MAAM,EAAE,QAAQ,GAAG,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,GAAG,MAAM,CAAA;IAErE,OAAO,CACL,oBAAC,QAAQ,IACP,GAAG,EAAC,QAAQ,EACZ,QAAQ,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,EAC5B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,OAAO,KACZ,UAAU,GACd,CACH,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport type { TableFooter } from '../types'\nimport { TableRow } from './TableRow'\n\ntype Props<K> = {\n footer: TableFooter<K>\n columnCount: number\n}\n\nexport function TableFooter<K extends object>({\n footer,\n columnCount,\n}: Props<K>) {\n if ('element' in footer) {\n return <td colSpan={columnCount}>{footer.element}</td>\n }\n\n const { rowColor = 'custard', data, columns, ...restFooter } = footer\n\n return (\n <TableRow\n key=\"footer\"\n rowIndex={columns.length - 1}\n rowColor={rowColor}\n rowData={data}\n columns={columns}\n {...restFooter}\n />\n )\n}\n"]}
|
package/dist/Table/types.d.ts
CHANGED
|
@@ -100,12 +100,21 @@ interface CommonTableProps<T> {
|
|
|
100
100
|
/** Hides the table header. Table defaults to always showing the header. */
|
|
101
101
|
hideTableHeader?: boolean;
|
|
102
102
|
}
|
|
103
|
-
export interface TableProps<T> extends CommonTableProps<T> {
|
|
103
|
+
export interface TableProps<T, K = undefined> extends CommonTableProps<T> {
|
|
104
104
|
/** Array of data to be displayed in the table. */
|
|
105
105
|
data: T[];
|
|
106
|
+
footer?: TableFooter<K>;
|
|
106
107
|
/** The text to show when there is no available data to map through. */
|
|
107
108
|
noDataContent?: ReactNode;
|
|
108
109
|
}
|
|
110
|
+
/**
|
|
111
|
+
* The type of the footer prop in the Table component.
|
|
112
|
+
* It can either be an array of columns and data, or a React element.
|
|
113
|
+
*
|
|
114
|
+
* For columns, the columns and data will be passed to each column.cell component to generate the footer.
|
|
115
|
+
* For a React element, it will render that as the table footer.
|
|
116
|
+
*/
|
|
117
|
+
export type TableFooter<K> = TableFooterColumnsProps<K> | TableFooterElementProps<K>;
|
|
109
118
|
export interface TableRowProps<T> extends CommonTableProps<T> {
|
|
110
119
|
rowData: T;
|
|
111
120
|
rowIndex: number;
|
|
@@ -118,5 +127,20 @@ export interface RowActionsProps<T> extends Pick<CommonTableProps<T>, 'expandabl
|
|
|
118
127
|
toggleExpansion: () => void;
|
|
119
128
|
isExpanded?: boolean;
|
|
120
129
|
}
|
|
130
|
+
type TableFooterElementProps<K> = {
|
|
131
|
+
element: ReactElement<K>;
|
|
132
|
+
};
|
|
133
|
+
type TableFooterColumnsProps<K> = {
|
|
134
|
+
/**
|
|
135
|
+
* Row color of the footer.
|
|
136
|
+
*
|
|
137
|
+
* @default 'custard'
|
|
138
|
+
*/
|
|
139
|
+
rowColor?: Color;
|
|
140
|
+
rowPadding?: SingleSpacing;
|
|
141
|
+
columnPadding?: SingleSpacing;
|
|
142
|
+
columns: TableColumn<K>[];
|
|
143
|
+
data: K;
|
|
144
|
+
};
|
|
121
145
|
export type TableHeaderProps<T> = CommonTableProps<T>;
|
|
122
146
|
export {};
|
package/dist/Table/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"","sourcesContent":["import React, { ReactElement, ReactNode } from 'react'\nimport { ButtonProps } from '../Button/Button'\nimport { IconStrictProps } from '../IconStrict'\nimport { Color } from '../theme'\nimport type { BoxSpacing, SingleSpacing } from './helper.types'\n\nexport type TableStylesProps = {\n hasKeyline?: boolean\n fixedHeader?: boolean\n headerHeight?: string\n stripedColor?: Color\n stickyCell?: boolean\n headerColor?: Color\n rowColor?: Color\n rowBorderColor?: Color\n rowActionsBgColor?: Color\n minWidth?: string\n maxWidth?: string\n noWrapContent?: boolean\n truncateContent?: boolean\n rowPadding?: string\n columnPadding?: string\n hideOverflow?: boolean\n clickableRow?: boolean\n noRowBorderColor?: boolean\n}\n\nexport type Primitive = string | number | boolean | bigint\n\nexport type BaseRowAction<T> = {\n onClick: (rowData: T) => void\n showCondition?: (rowData: T) => boolean\n}\n\nexport type RowAction<T> =\n | RowActionButtonDefault<T>\n | RowActionElementOverride<T>\n\nexport type RowActionButtonDefault<T> = {\n iconButton?: Pick<\n IconStrictProps,\n 'size' | 'render' | 'iconColor' | 'backgroundColor' | 'id' | 'title'\n > & { tooltipText?: string }\n genericButton?: Pick<\n ButtonProps,\n | 'children'\n | 'loading'\n | 'disabled'\n | 'primary'\n | 'secondary'\n | 'fallbackStyle'\n | 'textBtn'\n | 'smallButton'\n | 'id'\n >\n} & BaseRowAction<T>\n\nexport type RowActionElementOverride<T> = {\n element: ReactElement<any>\n} & BaseRowAction<T>\n\nexport type RowActions<T> = {\n actions: RowAction<T>[]\n minWidth?: string\n bgColor?: Color\n}\n\ntype RowCellRenderer<T> = (\n row: T,\n rowIndex: number,\n column: TableColumn<T>,\n id: string | number,\n) => React.ReactNode\n\nexport interface TableColumn<T> {\n name?: string | number | React.ReactNode\n minWidth?: string\n maxWidth?: string\n noWrapContent?: boolean\n truncateContent?: boolean\n hideOverflow?: boolean\n cell?: RowCellRenderer<T>\n}\n\ntype SubElementProps = {\n bgColor?: Color\n padding?: BoxSpacing\n margin?: BoxSpacing\n}\n\n/** @template T - The type of data the table displays. */\ninterface CommonTableProps<T> {\n /** Array of columns to display in the table. */\n columns: TableColumn<T>[]\n /** Sets the height of the header. */\n headerHeight?: string\n /** If true, the table header will be fixed/sticky. */\n fixedHeader?: boolean\n /** If true, the table header will have a key line. */\n hasKeyline?: boolean\n /** If present, the table rows will have alternating colors. */\n stripedColor?: Color\n /** A function to determine if a row is expandable. */\n expandable?: (rowData: T) => boolean\n /** The color for the table header. */\n headerColor?: Color\n /** The default color for each table row. */\n rowColor?: Color\n /** The default color for each table row border. */\n rowBorderColor?: Color\n /** If true, the table will have rounded corners */\n roundedTable?: true\n /** A React element to show when a row is expanded. */\n subTable?: SubElementProps & {\n table: (rowData: T) => ReactElement<any>\n }\n /** Settings for sub rows. */\n subRows?: SubElementProps & {\n /** Function that returns a React element for the sub row. */\n rows: (rowData: T) => ReactElement<any> | ReactElement<any>[]\n }\n /** Function to apply to a row, to make the entire row clickable, useful for navigation. */\n clickableRow?: (rowData: T) => void\n /** Array of actions that can be performed on each row. */\n rowActions?: RowActions<T>\n /** The Y padding for each row. */\n rowPadding?: SingleSpacing\n /** The X padding for each row. */\n columnPadding?: SingleSpacing\n /** Hides the table header. Table defaults to always showing the header. */\n hideTableHeader?: boolean\n}\n\nexport interface TableProps<T> extends CommonTableProps<T> {\n /** Array of data to be displayed in the table. */\n data: T[]\n /** The text to show when there is no available data to map through. */\n noDataContent?: ReactNode\n}\n\nexport interface TableRowProps<T> extends CommonTableProps<T> {\n rowData: T\n rowIndex: number\n showActions?: boolean\n hideBorder?: boolean\n}\n\nexport interface RowActionsProps<T>\n extends Pick<CommonTableProps<T>, 'expandable' | 'rowActions'> {\n rowData: T\n canExpandRow: boolean\n toggleExpansion: () => void\n isExpanded?: boolean\n}\n\nexport type TableHeaderProps<T> = CommonTableProps<T>\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"","sourcesContent":["import React, { ReactElement, ReactNode } from 'react'\nimport { ButtonProps } from '../Button/Button'\nimport { IconStrictProps } from '../IconStrict'\nimport { Color } from '../theme'\nimport type { BoxSpacing, SingleSpacing } from './helper.types'\n\nexport type TableStylesProps = {\n hasKeyline?: boolean\n fixedHeader?: boolean\n headerHeight?: string\n stripedColor?: Color\n stickyCell?: boolean\n headerColor?: Color\n rowColor?: Color\n rowBorderColor?: Color\n rowActionsBgColor?: Color\n minWidth?: string\n maxWidth?: string\n noWrapContent?: boolean\n truncateContent?: boolean\n rowPadding?: string\n columnPadding?: string\n hideOverflow?: boolean\n clickableRow?: boolean\n noRowBorderColor?: boolean\n}\n\nexport type Primitive = string | number | boolean | bigint\n\nexport type BaseRowAction<T> = {\n onClick: (rowData: T) => void\n showCondition?: (rowData: T) => boolean\n}\n\nexport type RowAction<T> =\n | RowActionButtonDefault<T>\n | RowActionElementOverride<T>\n\nexport type RowActionButtonDefault<T> = {\n iconButton?: Pick<\n IconStrictProps,\n 'size' | 'render' | 'iconColor' | 'backgroundColor' | 'id' | 'title'\n > & { tooltipText?: string }\n genericButton?: Pick<\n ButtonProps,\n | 'children'\n | 'loading'\n | 'disabled'\n | 'primary'\n | 'secondary'\n | 'fallbackStyle'\n | 'textBtn'\n | 'smallButton'\n | 'id'\n >\n} & BaseRowAction<T>\n\nexport type RowActionElementOverride<T> = {\n element: ReactElement<any>\n} & BaseRowAction<T>\n\nexport type RowActions<T> = {\n actions: RowAction<T>[]\n minWidth?: string\n bgColor?: Color\n}\n\ntype RowCellRenderer<T> = (\n row: T,\n rowIndex: number,\n column: TableColumn<T>,\n id: string | number,\n) => React.ReactNode\n\nexport interface TableColumn<T> {\n name?: string | number | React.ReactNode\n minWidth?: string\n maxWidth?: string\n noWrapContent?: boolean\n truncateContent?: boolean\n hideOverflow?: boolean\n cell?: RowCellRenderer<T>\n}\n\ntype SubElementProps = {\n bgColor?: Color\n padding?: BoxSpacing\n margin?: BoxSpacing\n}\n\n/** @template T - The type of data the table displays. */\ninterface CommonTableProps<T> {\n /** Array of columns to display in the table. */\n columns: TableColumn<T>[]\n /** Sets the height of the header. */\n headerHeight?: string\n /** If true, the table header will be fixed/sticky. */\n fixedHeader?: boolean\n /** If true, the table header will have a key line. */\n hasKeyline?: boolean\n /** If present, the table rows will have alternating colors. */\n stripedColor?: Color\n /** A function to determine if a row is expandable. */\n expandable?: (rowData: T) => boolean\n /** The color for the table header. */\n headerColor?: Color\n /** The default color for each table row. */\n rowColor?: Color\n /** The default color for each table row border. */\n rowBorderColor?: Color\n /** If true, the table will have rounded corners */\n roundedTable?: true\n /** A React element to show when a row is expanded. */\n subTable?: SubElementProps & {\n table: (rowData: T) => ReactElement<any>\n }\n /** Settings for sub rows. */\n subRows?: SubElementProps & {\n /** Function that returns a React element for the sub row. */\n rows: (rowData: T) => ReactElement<any> | ReactElement<any>[]\n }\n /** Function to apply to a row, to make the entire row clickable, useful for navigation. */\n clickableRow?: (rowData: T) => void\n /** Array of actions that can be performed on each row. */\n rowActions?: RowActions<T>\n /** The Y padding for each row. */\n rowPadding?: SingleSpacing\n /** The X padding for each row. */\n columnPadding?: SingleSpacing\n /** Hides the table header. Table defaults to always showing the header. */\n hideTableHeader?: boolean\n}\n\nexport interface TableProps<T, K = undefined> extends CommonTableProps<T> {\n /** Array of data to be displayed in the table. */\n data: T[]\n\n footer?: TableFooter<K>\n\n /** The text to show when there is no available data to map through. */\n noDataContent?: ReactNode\n}\n\n/**\n * The type of the footer prop in the Table component.\n * It can either be an array of columns and data, or a React element.\n *\n * For columns, the columns and data will be passed to each column.cell component to generate the footer.\n * For a React element, it will render that as the table footer.\n */\nexport type TableFooter<K> =\n | TableFooterColumnsProps<K>\n | TableFooterElementProps<K>\n\nexport interface TableRowProps<T> extends CommonTableProps<T> {\n rowData: T\n rowIndex: number\n showActions?: boolean\n hideBorder?: boolean\n}\n\nexport interface RowActionsProps<T>\n extends Pick<CommonTableProps<T>, 'expandable' | 'rowActions'> {\n rowData: T\n canExpandRow: boolean\n toggleExpansion: () => void\n isExpanded?: boolean\n}\n\ntype TableFooterElementProps<K> = {\n element: ReactElement<K>\n}\n\ntype TableFooterColumnsProps<K> = {\n /**\n * Row color of the footer.\n *\n * @default 'custard'\n */\n rowColor?: Color\n rowPadding?: SingleSpacing\n columnPadding?: SingleSpacing\n columns: TableColumn<K>[]\n data: K\n}\n\nexport type TableHeaderProps<T> = CommonTableProps<T>\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "12.
|
|
3
|
+
"version": "12.7.0",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"type": "module",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"@types/dompurify": "^3.2.0",
|
|
58
58
|
"@types/node": "^22.15.17",
|
|
59
59
|
"@types/react": "^19.1.4",
|
|
60
|
-
"@types/react-dom": "^19.1.
|
|
60
|
+
"@types/react-dom": "^19.1.5",
|
|
61
61
|
"@typescript-eslint/eslint-plugin": "^8.32.1",
|
|
62
62
|
"@typescript-eslint/parser": "^8.32.1",
|
|
63
63
|
"axe-playwright": "^2.1.0",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
70
70
|
"husky": "^9.1.7",
|
|
71
71
|
"jsdom": "^26.1.0",
|
|
72
|
-
"lint-staged": "^
|
|
72
|
+
"lint-staged": "^16.0.0",
|
|
73
73
|
"playwright": "^1.52.0",
|
|
74
74
|
"prettier": "^3.5.3",
|
|
75
75
|
"react": "^19.0.0",
|