@mrshmllw/smores-react 12.10.2 → 12.11.0-crumbs-feature-add-rowKey-to-cellData.1

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.
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { TableProps } from './types';
2
+ import { TableProps, type TableRowData } from './types';
3
3
  /**
4
4
  * A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.
5
5
  *
@@ -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, 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;
16
+ export declare const Table: <T extends TableRowData, 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;
@@ -27,7 +27,7 @@ export const Table = ({ columns, data, fixedHeader = true, hasKeyline = false, e
27
27
  data.length === 0 && (React.createElement("tr", null,
28
28
  React.createElement(StyledCell, { colSpan: expandSubProp, "$rowPadding": rowPadding, "$columnPadding": columnPadding }, noDataContent ?? React.createElement(Text, { align: "center" }, "No available data")))),
29
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 }))),
30
+ data.map((row, rowIndex) => (React.createElement(TableRow, { key: row.rowKey ?? 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
31
  footer && (React.createElement(TableFooter, { columnCount: columns.length, footer: footer })))))));
32
32
  };
33
33
  //# sourceMappingURL=Table.js.map
@@ -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;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"]}
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,CAA2C,EAC9D,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,GAAG,CAAC,MAAM,IAAI,QAAQ,EAC3B,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, type TableRowData } 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 TableRowData, 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={row.rowKey ?? 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"]}
@@ -100,6 +100,19 @@ interface CommonTableProps<T> {
100
100
  /** Hides the table header. Table defaults to always showing the header. */
101
101
  hideTableHeader?: boolean;
102
102
  }
103
+ /**
104
+ * The type of data that each row in the table should conform to.
105
+ */
106
+ export type TableRowData = {
107
+ /**
108
+ * It is recommended to have a rowKey for each row, but it is not mandatory.
109
+ * This key is used to uniquely identify each row in the table to accurately reconcile each row between React renders.
110
+ *
111
+ * If not provided, the row index will be used as the key.
112
+ * This might not ideal as unrelated rows may cause unexpected transitions if they change position within the table.
113
+ */
114
+ rowKey?: React.Key;
115
+ };
103
116
  export interface TableProps<T, K = undefined> extends CommonTableProps<T> {
104
117
  /** Array of data to be displayed in the table. */
105
118
  data: T[];
@@ -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, 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"]}
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\n/**\n * The type of data that each row in the table should conform to.\n */\nexport type TableRowData = {\n /**\n * It is recommended to have a rowKey for each row, but it is not mandatory.\n * This key is used to uniquely identify each row in the table to accurately reconcile each row between React renders.\n *\n * If not provided, the row index will be used as the key.\n * This might not ideal as unrelated rows may cause unexpected transitions if they change position within the table.\n */\n rowKey?: React.Key\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.10.2",
3
+ "version": "12.11.0-crumbs-feature-add-rowKey-to-cellData.1",
4
4
  "main": "./dist/index.js",
5
5
  "description": "Collection of React components used by Marshmallow Technology",
6
6
  "type": "module",