@symply.io/basic-components 1.0.0-beta.10 → 1.0.0-beta.11

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.
Files changed (7) hide show
  1. package/BasicTable/TableBodyRow.js +3 -2
  2. package/BasicTable/TableFooter.js +3 -2
  3. package/BasicTable/TableHeader.js +3 -2
  4. package/BasicTable/types.d.ts +1 -0
  5. package/BasicTable/useTable.d.ts +3 -0
  6. package/README.md +5 -4
  7. package/package.json +1 -1
package/BasicTable/TableBodyRow.js CHANGED
@@ -31,9 +31,10 @@ function BasicTableBodyRow(props) {
31
31
  fontWeight: 600
32
32
  }
33
33
  } }, { children: columns.map(function (col) {
34
- var accessor = col.accessor, Cell = col.Cell, _a = col.minWidth, minWidth = _a === void 0 ? "120px!important" : _a, _b = col.align, align = _b === void 0 ? "center" : _b;
35
- return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: align, sx: {
34
+ var accessor = col.accessor, Cell = col.Cell, _a = col.minWidth, minWidth = _a === void 0 ? "120px!important" : _a, width = col.width, _b = col.align, align = _b === void 0 ? "center" : _b;
35
+ return (_jsx(Grid, __assign({ item: true, textAlign: align, sx: {
36
36
  minWidth: minWidth,
37
+ width: width,
37
38
  paddingLeft: theme.spacing(0.625),
38
39
  paddingRight: theme.spacing(0.625)
39
40
  } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
package/BasicTable/TableFooter.js CHANGED
@@ -29,9 +29,10 @@ function BasicTableFooter(props) {
29
29
  fontWeight: 600
30
30
  }
31
31
  } }, { children: footers.map(function (footer) {
32
- var accessor = footer.accessor, Cell = footer.Cell, _a = footer.minWidth, minWidth = _a === void 0 ? "120px!important" : _a, _b = footer.align, align = _b === void 0 ? "center" : _b;
33
- return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: align, sx: {
32
+ var accessor = footer.accessor, Cell = footer.Cell, _a = footer.minWidth, minWidth = _a === void 0 ? "120px!important" : _a, width = footer.width, _b = footer.align, align = _b === void 0 ? "center" : _b;
33
+ return (_jsx(Grid, __assign({ item: true, textAlign: align, sx: {
34
34
  minWidth: minWidth,
35
+ width: width,
35
36
  paddingLeft: theme.spacing(0.625),
36
37
  paddingRight: theme.spacing(0.625),
37
38
  whiteSpace: "nowrap",
package/BasicTable/TableHeader.js CHANGED
@@ -29,9 +29,10 @@ function BasicTableHeader(props) {
29
29
  fontWeight: 600
30
30
  }
31
31
  } }, { children: headers.map(function (header) {
32
- var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, _b = header.minWidth, minWidth = _b === void 0 ? "120px!important" : _b, title = header.title, onSort = header.onSort, _c = header.canSort, canSort = _c === void 0 ? false : _c;
33
- return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, title: title, textAlign: align, sx: {
32
+ var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, _b = header.minWidth, minWidth = _b === void 0 ? "120px!important" : _b, width = header.width, title = header.title, onSort = header.onSort, _c = header.canSort, canSort = _c === void 0 ? false : _c;
33
+ return (_jsx(Grid, __assign({ item: true, title: title, textAlign: align, sx: {
34
34
  minWidth: minWidth,
35
+ width: width,
35
36
  paddingLeft: theme.spacing(0.625),
36
37
  paddingRight: theme.spacing(0.625),
37
38
  whiteSpace: "nowrap",
package/BasicTable/types.d.ts CHANGED
@@ -16,6 +16,7 @@ export interface IColumn {
16
16
  canSort?: boolean;
17
17
  canBeFrozen?: boolean;
18
18
  minWidth?: number;
19
+ width?: number;
19
20
  [name: string]: unknown;
20
21
  }
21
22
  interface IHeader extends IColumn {
package/BasicTable/useTable.d.ts CHANGED
@@ -11,6 +11,7 @@ declare function useTable(props: UseTableProps): {
11
11
  canSort: boolean | undefined;
12
12
  canBeFrozen?: boolean | undefined;
13
13
  minWidth?: number | undefined;
14
+ width?: number | undefined;
14
15
  Cell: JSX.Element;
15
16
  title: string;
16
17
  onSort: ({ field }: Pick<SortingProps, "field">) => void;
@@ -25,6 +26,7 @@ declare function useTable(props: UseTableProps): {
25
26
  canSort?: boolean | undefined;
26
27
  canBeFrozen?: boolean | undefined;
27
28
  minWidth?: number | undefined;
29
+ width?: number | undefined;
28
30
  Cell: import("react").FunctionComponentElement<any>;
29
31
  }[];
30
32
  columns: {
@@ -37,6 +39,7 @@ declare function useTable(props: UseTableProps): {
37
39
  canSort?: boolean | undefined;
38
40
  canBeFrozen?: boolean | undefined;
39
41
  minWidth?: number | undefined;
42
+ width?: number | undefined;
40
43
  Cell: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
41
44
  }[];
42
45
  rows: import("./types").IRow[];
package/README.md CHANGED
@@ -216,9 +216,9 @@ import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
216
216
 
217
217
  <h5>Column Props (IColumn)</h5>
218
218
 
219
- | accessor | string | | true | The key of the column, it should be unique. |
220
- | ----------- | --------------------------- | ------- | -------- | ----------------------------------------------------- |
221
219
  | Name | Type | Default | Required | Description |
220
+ | ----------- | --------------------------- | ------- | -------- | ----------------------------------------------------- |
221
+ | accessor | string | | true | The key of the column, it should be unique. |
222
222
  | align | "left" \|"center" \|"right" | | false | The alignment of the column. |
223
223
  | Body | ReactElement | | true | The component to render the column body cell. |
224
224
  | canBeFrozen | bool | | false | If true, the column can be frozen |
@@ -227,12 +227,13 @@ import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
227
227
  | headerTip | string | | false | The tip title text when the mouse is over the header. |
228
228
  | Footer | ReactElement | | false | The component to render the column footer cell. |
229
229
  | minWidth | number | 120 | false | The minimum width of cells. |
230
+ | width | number | | false | The fixed width of cells. |
230
231
 
231
232
  <h5>Hook Props</h5>
232
233
 
233
- | columns | Array\<IColumn\> | | true | table columns |
234
- | ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
235
234
  | Name | Type | Default | Required | Description |
235
+ | ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
236
+ | columns | Array\<IColumn\> | | true | table columns |
236
237
  | data | Array<{ [name]: unknown }> | | true | table data/rows |
237
238
  | disableSortBy | bool | | false | If true, the whole table can't be sortable. |
238
239
  | initialState | { sortBy?: SortByProps } | | false | Set the initial states |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@symply.io/basic-components",
3
- "version": "1.0.0-beta.10",
3
+ "version": "1.0.0-beta.11",
4
4
  "description": "Basic and reusable components for all frontend of Symply apps",
5
5
  "keywords": [
6
6
  "react",