purecloudlabs / fixtable-angular Goto Github PK
View Code? Open in Web Editor NEWAngular wrapper for Fixtable grid
License: MIT License
Angular wrapper for Fixtable grid
License: MIT License
It'd be nice if a Fixtable could figure out the options for a select-type filter dynamically by running through all of the data rows and seeing what the possible values for that column are, rather than needing to specify the options in the configuration.
This wouldn't work well for a data set that's paginated on the server, so presumably we'd still need the ability to specify select options in the config in that case.
(Duplicating this issue from the Fixtable-Ember repo for consistency: fixtable-ember issue#31)
ngRepeat has several nifty little gidgets for determining first, middle, and last children, even and odd children, and child index. We should add support for these by either passing a callback to execute on certain children that meet these parameters or just by adding classes to them.
Introduced by (my) PR #43.
by which I mean columns that exist or don't show based on a condition. I can conditionally add a column to the set but if that happens on a future js pass (say after an api call) then rendering widths gets messed up. I have found that it works better to conditionally remove a column so that's how I've set it up for now.
When changing pages, scroll position should return to the top
Such as on the person list page - if user wanted to sort all the invite sent dates to cherry people individuals - or just in general.
Regression caused when adding pagination functionality.
When page up or page down button is clicked multiple times in quick succession, the getPageData function is only fired on the first click, resulting in the wrong data for the page number displayed in the UI.
With PR 35, our grids are now showing the paging controls even if there are no results. Am now seeing a grid with the header, no rows, and paging instead of my configured emptyTemplate.
The $watch expression on pagingOptions shouldn't fire if only the totalItems changed. Currently, any time the callback is fired (on load, or changing page/pageSize) and the callback updates the totalItems, the $watch gets triggered and the callback fires a second time unnecessarily.
For instances where data table is rendered but hidden at page load.
For cases when the service call throws an error, it'd be nice to be able to set a table state in our catch blocks to display a config-defined error template, maybe with a parameter(s) for custom messages and/or stack trace?
I noticed our grids are are calling the API twice on the initial load of the grid. I think this started on build 1.3.12 when paging started allowing functions...but can't be sure. Changing pages doesn't cause this issue, only the first load of the grid.
Should be able to specify a message to display when the dataset is empty.
In order to allow arbitrary HTML, we should probably also accept a template in addition to raw text.
table
, tr
and td
elements should be able to have custom classes applied through the config object passed to the directive.
To provide ability to run a property through an Angular filter before using the default cell template. Ideally should support passing additional arguments to the filter as well.
Some logic related to pagination, etc. could be extracted to fixtable-core to be reused with other wrappers.
Several features have been added since documentation was last updated.
I have a use case where I need to check a feature toggle before defining the table's columns and an error is thrown if I don't have a table def on the first page render. IE, if the template renders <fixtable options="tableOptions"></fixtable>
and $scope.tableOptions hasn't been defined yet it throw an exception.
May also require updates to Fixtable core library to set all header divs to height of tallest
Even if row selection is not enabled, rows are always behaving as if it were.
For instance, adding data-
tags to help in automated tests
If a user changes the page size to a large number, say 100, and the number of rows is below that number then the page footer will disappear on page reload.
It'd be nice to set a row click function in the config. In my case, row selection isn't needed, but doing something on a row click is. Currently getting around this via watching fixtableSelectRow.
$scope.$on('fixtableSelectRow', function (eventIgnored: ng.IAngularEvent, row: ContactModel) { // do something });
Came across a unique case today. My latest table has all columns set to a defined width except the last one. I'm also using a checkbox template with an empty div to hide that column & keep the rows clickable. Here's my config & checkbox template...
this.options = {
data: 'data',
loading: 'loading',
paging: true,
pagingOptions: new PagingOptions(
1,
Constants.PAGE_SIZES[0],
0,
Constants.PAGE_SIZES,
'getPageData'),
columns: [
{
template: 'app/layout/flexGridInteractionType.tmpl.html',
width: 25
},
{
label: results["INTERACTIONS.TIME"],
property: 'interactionTime',
template: 'app/layout/flexGridInteractionDate.tmpl.html',
sortable: true,
width: 80
},
{
label: results["INTERACTIONS.CONTACT"],
property: 'interactionRemote',
template: 'app/layout/flexGridInteractionRemote.tmpl.html',
width: 175
},
{
property: 'interactionDirection',
template: 'app/layout/flexGridInteractionDirection.tmpl.html',
width: 30,
cellClass: 'noPadding'
},
{
label: results["INTERACTIONS.USER"],
template: 'app/layout/flexGridInteractionUser.tmpl.html',
width: 175
},
{
label: results["ORG.NOTES"],
template: 'app/layout/flexGridInteractionNotes.tmpl.html'
}
],
checkboxHeaderTemplate: 'app/layout/flexGridCheckbox.tmpl.html',
checkboxCellTemplate: 'app/layout/flexGridCheckbox.tmpl.html',
footerTemplate: 'app/layout/flexGridMinPagingFooter.tmpl.html',
loadingTemplate: 'app/layout/flexGridLoading.tmpl.html',
emptyTemplate: 'app/layout/flexGridNothing.tmpl.html',
sort: {
property: 'interactionDate',
direction: DESC
},
tableClass: 'table interactionList hideCheckbox',
debugMode: false,
rowSelection: true,
selectedItems: 'selectedRows',
rowSelectionWithCheckboxOnly: false
};
Template:
<div class="flexHideCheckbox" style="width: 0;"></div>
I can only reproduce this when all but one (doesnt matter which) is set to a width, including the checkbox column. I think the heart of the issue is, I cant put a class on the checkbox column to set a static width. The column stays at 0 until I hit some minimum threshold. Then it starts flexing like a default checkbox column would.
Could we get a static class added to the checkbox column table cell?
Correct object path is scope.options.pagingOptions.type
Also, include existential operator on object.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.