Skip to content

Commit

Permalink
Merge pull request #47 from Gavant/ember-tbl-types
Browse files Browse the repository at this point in the history
Ember tbl types
  • Loading branch information
bakerac4 authored Nov 2, 2022
2 parents 5cb55df + 8c2802d commit c5e7da8
Show file tree
Hide file tree
Showing 33 changed files with 485 additions and 1,117 deletions.
61 changes: 4 additions & 57 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,15 @@ columns = [
name: 'Date',
isFixedLeft: true,
width: 200,
staticWidth: 200
},
{
valuePath: 'name',
name: 'Name',
isFixedLeft: false,
width: 100,
staticWidth: 100,
maxWidth: 100,
minWidth: 100
maxWidth: 200,
minWidth: 50
}
]
Expand All @@ -71,8 +70,6 @@ rows = [
];
```

It is important to note that `staticWidth` is a property that is used to calculate column visibility at different breakpoints and is **required** on each column object.

A `footerRows` array can be used as an argument as well, often containing table metadata.

Template
Expand All @@ -93,52 +90,6 @@ footerData = [
];
```

Other optional configurations:

@**attribute** { **type**: **defaultValue** } - **description**

```
@tableMeta {hash: {} } - A table meta object that is passed to every table component, allowing access from anywhere.
@bufferSize {number: 0} - Used by the table's <VerticalCollection> to render rows before and after the visible collection.
@containerSelector {string: 'body} - The selector used by <VerticalCollection> to calculate occulsion rendering. Set this to `null` for fixed height/scrollable tables.
@constrainColumnsToFit {boolean: true} - Forces the columns to fit within the table container on any column visibility update.
@enableReorder {boolean: false} - Enable/disable column re-ordering.
@enableSort {boolean: false} - Enable/disable row sorting.
@enableUserResize {boolean: false} - Enable/disable column re-sizing. Note: Column objects with max/min widths will not be resizable.
@estimateRowHeight {number: 30} - Used by <VerticalCollection> to estimate the row height when rendering.
@fillColumnIndex {number | null : null} - The column index of the column that will receive any un-allocated width.
@fillMode {string: 'first-column'} - The fill mode used by Ember Table to allocate additional width.
@footerRows {array<any>: []} - The footer rows to be displayed. i.e. for a table with a 'subtotal' column:
footerRows: { subtotal:500};
@hasMoreRows {boolean: false} - A boolean used to indicate if the table should invoke @loadMoreRows.
@hoverableRows {boolean: true} - Enable/disable hoverable rows.
@isLoading {boolean: false} - Will display a progress spinner within the table when true.
@noResultsText {string: 'No results found'} - Displayed when there are no rows.
@panButtonClass {string: 'btn btn-secondary'} - The class given to the pan-buttons when there are hidden columns.
@renderAll {boolean: false} - Used by <VerticalCollection> to determine if all rows should be rendered.
@resizeDebounce {number: 250} - The debounce time used by the resize listener to update column visibility.
@resizeMode {string: 'standard'} - The resize mode used by EmberTable when resizing columns. Note: @enableUserResize must be true.
@resizeWidthSensitive {boolean: true} - Enable/disable column visibility updates on width resizing.
@showEmptyFooter {boolean: false} - Enable/disable the footer when empty.
@showHeader {boolean: true} - Enable/disable the table header.
@small {boolean: true} - Appends 'table-sm' to the table class when true.
@sortEmptyLast {boolean: false} - When enabled, empty column values will always be sorted last.
@stripedRows {boolean: false} - Enable/disabled striped rows.
@tableClass {string: 'table'} - The class for the EmberTable.
@tableHeight {string: ''} - The height style given to the table. i.e. '300px'
@widthConstraint {string: 'lte-container'} - The width constraint used by EmberTable.
@headerStickyOffset {number: 0} - When column headers are "sticky", this sets their offset (in pixels) from the top of the scrollable container
@footerStickyOffset {number: 0} - When column footers are "sticky", this sets their offset (in pixels) from the bottom of the scrollable container
@loadMoreRows {() => any: null} - A method that updates the rows array when isLoading is false, hasMoreRows is true, and the user has reached the bottom of the table.
@loadPreviousRows {() => any: null} - A method that updates the rows array when isLoading is false, hasMoreRows is true, and the user has reached the top of the table.
@onRowClick {()=> any: null} - The method triggered on row click.
@onRowDoubleClick {()=> any: null} - The method triggered on row double click.
```

##### Using the Expandable Row Component

The following is a basic implementation of the expandable-row component pattern.
Expand All @@ -157,15 +108,11 @@ export default class FooController extends Controller {
valuePath: 'name',
name: 'Name',
isFixedLeft: false,
width: 100,
staticWidth: 100
minWidth: 100
},
{
valuePath: 'id',
cellComponent: 'table/cell/button',
width: 100,
staticWidth: 100,
maxWidth: 100,
minWidth: 100,
toggleRow: this.toggleRow
}
Expand Down
29 changes: 21 additions & 8 deletions ember-table/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"dependencies": {
"@embroider/addon-shim": "^1.0.0",
"@embroider/util": "^1.0.0",
"@gavant/glint-template-types": "^0.1.8"
"@gavant/glint-template-types": "^0.2.4"
},
"peerDependencies": {
"@ember/render-modifiers": "^2.0.4",
Expand Down Expand Up @@ -84,6 +84,7 @@
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-qunit": "^7.2.0",
"expect-type": "^0.14.2",
"npm-run-all": "^4.1.5",
"prettier": "^2.6.1",
"release-it": "^14.14.0",
Expand All @@ -99,8 +100,23 @@
"components/table": [
"dist/components/table/index.d.ts"
],
"components/ember-table-override": [
"dist/components/ember-table-override/index.d.ts"
],
"components/ember-tbody-override": [
"dist/components/ember-tbody-override/index.d.ts"
],
"components/progress-spinner": [
"dist/components/progress-spinner/index.d.ts"
],
"components/row/expandable-row": [
"dist/components/row/expandable-row/index.d.ts"
],
"components/row/loading": [
"dist/components/row/loading/index.d.ts"
],
"components/row/no-results": [
"dist/components/row/no-results/index.d.ts"
]
}
},
Expand All @@ -124,16 +140,13 @@
"./components/table/index.js": "./dist/_app_/components/table/index.js"
}
},
"publishConfig": {
"access": "public"
},
"exports": {
".": "./dist/index.js",
"./*": {
"default": "./dist/*.js"
},
"./*": "./dist/*",
"./addon-main.js": "./addon-main.js"
},
"publishConfig": {
"access": "public"
},
"volta": {
"extends": "../package.json"
}
Expand Down
1 change: 1 addition & 0 deletions ember-table/src/components/ember-table-override/index.hbs
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{{! @glint-nocheck }}
<div data-test-ember-table-overflow id="{{this.elementId}}-overflow" class="ember-table-overflow">
<table class={{@tableClasses}}>
{{yield
Expand Down
102 changes: 59 additions & 43 deletions ember-table/src/components/ember-table-override/index.ts
Original file line number Diff line number Diff line change
@@ -1,55 +1,71 @@
import EmberTbodyComponent from 'components/ember-tbody-override';
import EmberTableLoadingMore from 'ember-table/components/ember-table-loading-more/component';
import EmberTable, { EmberTableSignature } from 'ember-table/components/ember-table/component';
import EmberTableCell from 'ember-table/components/ember-td/component';
import EmberTableFooter, { EmberTableFooterSignature } from 'ember-table/components/ember-tfoot/component';
import EmberTableHeader from 'ember-table/components/ember-thead/component';
import EmberTableRow from 'ember-table/components/ember-tr/component';
// import EmberTbodyComponent from 'components/ember-tbody-override';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
import EmberTable from 'ember-table/components/ember-table/component';

import { WithBoundArgs } from '@glint/template';
// import EmberTableLoadingMore from 'ember-table/components/ember-table-loading-more/component';
import { Column, ColumnMeta, RowValue } from '@gavant/glint-template-types/types/ember-table/table';

// // import EmberTableCell from 'ember-table/components/ember-td/component';
// // import EmberTableFooter, { EmberTableFooterSignature } from 'ember-table/components/ember-tfoot/component';
// import EmberTableHeader from 'ember-table/components/ember-thead/component';
// // import EmberTableRow from 'ember-table/components/ember-tr/component';
// import { WithBoundArgs } from '@glint/template';
import { setupTableStickyPolyfill, teardownTableStickyPolyfill } from '../../-private/sticky/table-sticky-polyfill';

interface OverridenFooterSignature {
Args: EmberTableFooterSignature['Args'];
Blocks: {
default: [
{
cells: EmberTableCell[];
isHeader: boolean;
rowsCount: number;
row: WithBoundArgs<typeof EmberTableRow, 'api'>;
}
];
};
Element: EmberTableFooterSignature['Element'];
}
// interface OverridenFooterSignature<CV extends Column<CV, RV, M, CM, RM, TM>, RV, M, CM extends ColumnMeta, RM, TM> {
// Args: EmberTableFooterSignature<CV, RV, M, CM, RM, TM>['Args'];
// Blocks: {
// default: [
// {
// cells: EmberTableCell<CV, RV, M, CM, RM, TM>[];
// isHeader: boolean;
// rowsCount: number;
// row: WithBoundArgs<typeof EmberTableRow, 'api'>;

interface OverrideSignature {
Args: {
tableClasses?: string;
tableId?: string;
headerStickyOffset?: number;
footerStickyOffset?: number;
};
// cells: EmberTableCell<CV, RV, M, CM, RM, TM>[];
// isHeader: boolean;
// rowsCount: number;
// row: WithBoundArgs<typeof EmberTableRow, 'api'>;
// }
// ];
// };
// Element: EmberTableFooterSignature<CV, RV, M, CM, RM, TM>['Element'];
// }

Blocks: {
default: [
{
api: any;
head: WithBoundArgs<typeof EmberTableHeader, 'api'>;
body: WithBoundArgs<typeof EmberTbodyComponent, 'api'>;
foot: WithBoundArgs<typeof EmberTableFooter<OverridenFooterSignature>, 'api'>;
loadingMore: WithBoundArgs<typeof EmberTableLoadingMore, 'api'>;
}
];
};
Element: EmberTableSignature['Element'];
}
// interface OverrideSignature<CV extends Column<CV, RV, M, CM, RM, TM>, RV, M, CM extends ColumnMeta, RM, TM> {
// Args: {
// tableClasses?: string;
// tableId?: string;
// headerStickyOffset?: number;
// footerStickyOffset?: number;
// };

// Blocks: {
// default: [
// {
// api: any;
// head: WithBoundArgs<typeof EmberTableHeader, 'api'>;
// body: WithBoundArgs<typeof EmberTbodyComponent, 'api'>;
// foot: any;
// loadingMore: WithBoundArgs<typeof EmberTableLoadingMore, 'api'>;
// }
// ];
// };
// Element: EmberTableSignature<CV, RV, M, CM, RM, TM>['Element'];
// }

export default class EmberTableOverrideComponent extends EmberTable<OverrideSignature> {
export default class EmberTableOverrideComponent<
CV extends Column<RV, M, CM, RM, TM>,
RV extends RowValue,
M,
CM extends ColumnMeta,
RM,
TM
> extends EmberTable<CV, RV, M, CM, RM, TM> {
headerStickyOffset = 0;
footerStickyOffset = 0;
declare element: HTMLElement;

/**
* Reimplements base didInsertElement() w/sticky offset params
Expand Down
53 changes: 39 additions & 14 deletions ember-table/src/components/ember-tbody-override/index.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,42 @@
import EmberTbody, { EmberTableBodySignature } from 'ember-table/components/ember-tbody/component';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
import EmberTbody from 'ember-table/components/ember-tbody/component';

type OverridenArgs = EmberTableBodySignature['Args'] & {
isLoading?: boolean;
showBottomLoading?: boolean;
showTopLoading?: boolean;
isEmpty?: boolean;
noResultsText?: string;
};
import { Column, ColumnMeta, RowValue } from '@gavant/glint-template-types/types/ember-table/table';

interface OverridenSignature {
Args: OverridenArgs;
Blocks: EmberTableBodySignature['Blocks'];
Element: EmberTableBodySignature['Element'];
}
// type OverridenArgs<
// CV extends Column<RV, M, CM, RM, TM>,
// RV extends RowValue,
// M,
// CM extends ColumnMeta,
// RM,
// TM
// > = EmberTableBodySignature<CV, RV, M, CM, RM, TM>['Args'] & {
// isLoading?: boolean;
// showBottomLoading?: boolean;
// showTopLoading?: boolean;
// isEmpty?: boolean;
// noResultsText?: string;
// };

export default class EmberTbodyComponent extends EmberTbody<OverridenSignature> {}
// interface OverridenSignature<
// CV extends Column<RV, M, CM, RM, TM>,
// RV extends RowValue,
// M,
// CM extends ColumnMeta,
// RM,
// TM
// > {
// Args: OverridenArgs<CV, RV, M, CM, RM, TM>;
// Blocks: EmberTableBodySignature<CV, RV, M, CM, RM, TM>['Blocks'];
// Element: EmberTableBodySignature<CV, RV, M, CM, RM, TM>['Element'];
// }

export default class EmberTbodyComponent<
CV extends Column<RV, M, CM, RM, TM>,
RV extends RowValue,
M,
CM extends ColumnMeta,
RM,
TM
> extends EmberTbody<CV, RV, M, CM, RM, TM> {}
8 changes: 2 additions & 6 deletions ember-table/src/components/row/expandable-row/index.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-nocheck
import { action } from '@ember/object';
import Component from '@glimmer/component';

import { SelectionMode } from '../../../constants/table';
import { TableMeta } from '../../table';

import type { RowApi } from '@gavant/glint-template-types/types/ember-table/row';

export interface TableExpandedRowArgs {
api: RowApi;
api: any;
tableMeta?: TableMeta<{ expandedRowComponent: typeof Component; expandedRows?: any[] }>;
rowSelectionMode: SelectionMode;
onClick?(...args: any[]): void;
Expand All @@ -21,7 +17,7 @@ interface TableExpandedRowSignature {
Blocks: {
default: [
{
api: RowApi;
api: any;
cellValue: any;
cellMeta: any;
columnValue: any;
Expand Down
1 change: 1 addition & 0 deletions ember-table/src/components/table/index.hbs
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{{! @glint-nocheck }}
<div
class="data-table
{{if this.hasHiddenColumns ' has-hidden-columns'}}
Expand Down
Loading

0 comments on commit c5e7da8

Please sign in to comment.