Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancements to float header, footer, and page summary #1009

Closed
kartik-v opened this issue Nov 11, 2021 · 0 comments
Closed

Enhancements to float header, footer, and page summary #1009

kartik-v opened this issue Nov 11, 2021 · 0 comments

Comments

@kartik-v
Copy link
Owner

kartik-v commented Nov 11, 2021

Various new enhancements to add capability to float header, footer, and page summary. This will eliminate dependency on floatThead plugin and simplify. Targeting - New release v3.5.0.

Following new properties will be added:

    /**
     * @var boolean whether the grid will have a floating table header. Note that the table header will stick to the
     * top of the page by default if this is set to `true`. To add an offset - you can configure the CSS style
     * within `headerContainer` - for example:
     *
     * ```
     *    'headerContainer' => ['class' => 'kv-table-header, 'style' => 'top: 50px'] // to set an offset
     * ```
     */
    public $floatHeader = false;

    /**
     * @var boolean whether the grid will have a floating table footer.
     */
    public $floatFooter = false;

    /**
     * @var boolean whether the grid will have a floating page summary. If this is set to `true` it will
     * override one of the following based on `pageSummaryPosition` setting:
     * - the `floatFooter` setting when `pageSummaryPosition` is `GridView::POS_BOTTOM`
     * - the `floatHeader` setting when `pageSummaryPosition` is `GridView::POS_TOP`
     * Note that when position is set to `POS_TOP`, the page summary will stick to the  top of the page by default.
     * To add an offset - you can configure the CSS style within `pageSummaryContainer` - for example:
     *
     * ```
     *    'pageSummaryContainer' => ['style' => 'top: 50px'] // to set an offset
     * ```
     */
    public $floatPageSummary = false;

    /**
     * @var array the HTML options for the table `thead`. The CSS class 'kv-table-header' is added by default and
     * creates the Krajee default header styling for a better float header behavior. In case you are overriding this
     * property at runtime, either use your own CSS class/ style or add the default CSS 'kv-table-header'. Note that
     * with `floatHeader` enabled to `true`, you may need to add an offset for the floated header from top when
     * scrolling (e.g. in cases where you have a fixed bootstrap navbar on top). For example:
     *
     * ```
     *    'headerContainer' => ['class' => 'kv-table-header, 'style' => 'top: 50px'] // to set an offset
     * ```
     */
    public $headerContainer = ['class' => 'kv-table-header'];

    /**
     * @var array the HTML options for the table `tfoot`
     */
    public $footerContainer = ['class' => 'kv-table-footer'];

Following properties will be deprecated and removed in future releases:

   /**
     * @deprecated since release v3.5.0
     * @var boolean whether the table header will float and sticks around as you scroll within a container. If
     * `responsive` is true then this is auto set to `true`.
     */
    public $floatOverflowContainer = false;

    /**
     * @deprecated since release v3.5.0
     * @var array the plugin options for the floatThead plugin that would render the floating/sticky table header
     * behavior. The default offset from the top of the window where the floating header will 'stick' when scrolling
     * down is set to `50` assuming a fixed bootstrap navbar on top. You can set this to `0` or any javascript
     * function / expression.
     * @see http://mkoryak.github.io/floatThead#options
     */
    public $floatHeaderOptions = [];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant