weixin_39884872
weixin_39884872
2020-12-02 22:40

Column toggle

Could you implement column toggle please ?

Just something similar to the column toggle demo from the link below

http://filamentgroup.github.io/tablesaw/demo/toggle.html

该提问来源于开源项目:AllenFang/react-bootstrap-table

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

22条回答

  • weixin_39884872 weixin_39884872 5月前

    I fixed it in 1 line of csv_export_util.js file.

    I modified that line to: if(typeof window !== 'undefined' && typeof window.document !== 'undefined')

    Basically I added check if window.document is not undefined as well

    On 10 March 2016 at 02:14, Allen notifications.com wrote:

    I bought template with webpack settings and gulp tasks

    what's means?

    Can this error occur due to React Server Side Rendering ?

    I think this is the real problem

    I'll check this out, btw, could you give me a repo or example to reproduce this issue?

    — Reply to this email directly or view it on GitHub https://github.com/AllenFang/react-bootstrap-table/issues/299#issuecomment-194620981 .

    点赞 评论 复制链接分享
  • weixin_39601511 weixin_39601511 5月前

    cool, did you want to open a PR for fixing this issue that you encounter?

    点赞 评论 复制链接分享
  • weixin_39884872 weixin_39884872 5月前

    Hi Allen

    To customize row style I use trClassNameFormat function.

    But I want to style it with user defined colors(color picked by user with help of third party "color picker"), something like style={backgroundColor:"#userDefinedColor"}

    Is it hard to implement for you ? Can I add this feature to issues one on github ?

    On 10 March 2016 at 14:49, Allen notifications.com wrote:

    cool, did you want to open a PR for fixing this issue that you encounter?

    — Reply to this email directly or view it on GitHub https://github.com/AllenFang/react-bootstrap-table/issues/299#issuecomment-194882865 .

    点赞 评论 复制链接分享
  • weixin_39601511 weixin_39601511 5月前

    I thinks a given style apply into the tr seems like a good improvement, for your case, maybe you can give a classname by trClassName and after user pickup a color, use document.querySelector to get the class and assign the bgcolor: document.querySelector('your_tr_classname').style.backgroundColor = XXX

    点赞 评论 复制链接分享
  • weixin_39884872 weixin_39884872 5月前

    thank you very much Allen

    On 14 March 2016 at 17:59, Allen notifications.com wrote:

    I thinks a given style apply into the tr seems like a good improvement, for your case, maybe you can give a classname by trClassName and after use pickup a color, use document.querySelector to get the class and assign the bgcolor: document.querySelector('your_tr_classname').style.backgroundColor = XXX

    — Reply to this email directly or view it on GitHub https://github.com/AllenFang/react-bootstrap-table/issues/299#issuecomment-196443337 .

    点赞 评论 复制链接分享
  • weixin_39850920 weixin_39850920 5月前

    Are you still needing help wiht this? We love the jQuery plugin.. but can't live without the Column Toggle Feature.. if you still need help, since we are working on this part right now, I'd love to get it working.

    点赞 评论 复制链接分享
  • weixin_39601511 weixin_39601511 5月前

    , because v2.0.0 has been released, so I'll try to do this support again, hope the column width problem can be tackled

    点赞 评论 复制链接分享
  • weixin_39850920 weixin_39850920 5月前

    I'd be willing to take a stab at it and if I can get it working submit a PR.. :)

    点赞 评论 复制链接分享
  • weixin_39601511 weixin_39601511 5月前

    , thanks your helping :+1:

    点赞 评论 复制链接分享
  • weixin_39844426 weixin_39844426 5月前

    Hey there, regarding SSR, I have a PR here - https://github.com/AllenFang/react-bootstrap-table/pull/341

    点赞 评论 复制链接分享
  • weixin_39615956 weixin_39615956 5月前

    Hi there

    I was wondering if anyone has some example code of a self implemented column toggle (until it's integrated)?

    Thanks!

    点赞 评论 复制链接分享
  • weixin_39615956 weixin_39615956 5月前

    Here you go:

    
    import React from 'react';
    import { Button, Modal } from 'react-bootstrap';
    import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
    
    
    const products = [];
    
    function addProducts(quantity) {
      const startId = products.length;
      for (let i = 0; i < quantity; i++) {
        const id = startId + i;
        products.push({
          id: id,
          name: 'Item name ' + id,
          price: 2100 + i
        });
      }
    }
    
    addProducts(5);
    
    export default class ColumnHideTable extends React.Component {
    
      constructor(props) {
        super(props);
        this.state = { showModal: false, hiddenColumns: {} };
      }
    
      closeColumnDialog() {
        this.setState({ showModal: false });
      }
    
      openColumnDialog() {
        this.setState({ showModal: true });
      }
    
      changeColumn(id) {
        return () => {
          this.setState({ hiddenColumns: Object.assign(this.state.hiddenColumns, { [e]: !this.state.hiddenColumns[e]}) });
        };
      }
    
      render() {
        return (
          <div>
            <button onclick="{::this.openColumnDialog}">Visible Columns</button>
            <modal show="{this.state.showModal}" onhide="{::this.closeColumnDialog}">
              <modal.header closebutton></modal.header>
              <modal.body>
                  <input type="checkbox" onchange="{this.changeColumn('id')}" checked> ID <br>
                  <input type="checkbox" onchange="{this.changeColumn('name')}" checked> Name <br>
                  <input type="checkbox" onchange="{this.changeColumn('price')}" checked> Price <br>
              </modal.body>
            </modal>
    
            <bootstraptable data="{" products>
                <tableheadercolumn datafield="id" iskey="{" true hidden="{this.state.hiddenColumns.id}">Product ID</tableheadercolumn>
                <tableheadercolumn datafield="name" hidden="{this.state.hiddenColumns.name}">Product Name</tableheadercolumn>
                <tableheadercolumn datafield="price" hidden="{this.state.hiddenColumns.price}">Product Price</tableheadercolumn>
            </bootstraptable>
          </div>
        );
      }
    }
    

    Edit: Fixed bug, thanks

    点赞 评论 复制链接分享
  • weixin_39601511 weixin_39601511 5月前

    , sorry for forgetting answer your question.... And your example looking perfect at first see. I think it could be a workaround temporary.

    点赞 评论 复制链接分享
  • weixin_39606019 weixin_39606019 5月前

    Couldn't make it work (no errors, it just always toggles only id column), so here is my corrected version:

    javascript
    import React from 'react';
    import { Button, Modal, Checkbox } from 'react-bootstrap';
    import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
    
    
    const products = [];
    
    function addProducts(quantity) {
      const startId = products.length;
      for (let i = 0; i < quantity; i++) {
        const id = startId + i;
        products.push({
          id: id,
          title: 'Item name ' + id,
          shop_id: 2100 + i
        });
      }
    }
    
    addProducts(5);
    
    export default class ColumnToggle extends React.Component {
    
      constructor(props) {
        super(props);
        this.state = {
          showModal: false,
          hiddenColumns: {} };
        this.openColumnDialog = this.openColumnDialog.bind(this);
        this.closeColumnDialog = this.closeColumnDialog.bind(this);
        this.changeColumn = this.changeColumn.bind(this);
      }
    
      closeColumnDialog() {
        this.setState({ showModal: false });
      }
    
      openColumnDialog() {
        console.log(this);
        this.setState({ showModal: true });
      }
    
      changeColumn(e) {
        console.log('--',e.target.id);
        const p = e.target.id;
        this.setState({
          hiddenColumns: Object.assign(this.state.hiddenColumns,
          {
            [p]: !this.state.hiddenColumns[p],
          }
        ) });
    
      }
    
      render() {
        return (
          <div>
    
            <button onclick="{this.openColumnDialog}">Visible Columns</button>
            <modal show="{this.state.showModal}" onhide="{this.closeColumnDialog}">
              <modal.body>
               <checkbox id="id" onchange="{this.changeColumn}">ID</checkbox>
               <checkbox id="title" onchange="{this.changeColumn}">title</checkbox>
               <checkbox id="shop_id" onchange="{this.changeColumn}">shop_id</checkbox>
    
              </modal.body>
            </modal>
    
            <bootstraptable data="{" products>
                <tableheadercolumn datafield="id" iskey="{" true hidden="{this.state.hiddenColumns.id}">Product ID</tableheadercolumn>
                <tableheadercolumn datafield="title" hidden="{this.state.hiddenColumns.title}">Title</tableheadercolumn>
                <tableheadercolumn datafield="shop_id" hidden="{this.state.hiddenColumns.shop_id}">shop_id</tableheadercolumn>
            </bootstraptable>
    
          </div>
        );
      }
    }
    
    点赞 评论 复制链接分享
  • weixin_39606019 weixin_39606019 5月前

    BTW, it there possibility to check if certain column hidden or not?

    点赞 评论 复制链接分享
  • weixin_39615956 weixin_39615956 5月前

    Dear

    Thanks for the bug report. I extracted that snippet from a larger project... classical copy&paste error. What do you mean by "check if a column is hidden"? You can always check the 'hiddenColumns' object, e.g.

    
    const checkID = this.state.hiddenColumns.id;
    
    点赞 评论 复制链接分享
  • weixin_39601511 weixin_39601511 5月前

    , need some time, i'm busy. but this workaround is you can use hidden and custom a toggle

    点赞 评论 复制链接分享
  • weixin_39601511 weixin_39601511 5月前

    , there are some technical problem when implement this feature, the problem is the column width can't be restored when toggle to show. The column width and align problem is a critical issue currently so that I've planed a new dom structure for react-bootstrap-table. In addition, I think I will try to implement this feature after my new plan completely. So I suggest you to handle hidden props on your state and custom toggle on your component. Feel free to discuss with me

    点赞 评论 复制链接分享
  • weixin_39884872 weixin_39884872 5月前

    How things are going with column toggle feature ?

    Allen, I cannot run react-boostrap-table using react server side rendering - client side rendering.

    I got error during the server side compilation time. As you can see during server side compilation 'doc' (or window.document) is undefined:

    undefined:29 save_link= doc.createElementNS("http://www.w3.org/1999/xhtml", "a"), ^ TypeError: Cannot read property 'createElementNS' of undefined

    I just run npm react-bootsrap-table and use import module inside one of my components like {BootstrapTable, BootstrapTableColumn} from ('react-bootsrap-table')

    So how can I use it with server side rendering ?

    On 27 February 2016 at 12:42, Allen Fang notifications.com wrote:

    https://github.com/lu44anno, there are some technical problem when implement this feature, the problem is the column width can't be restored when toggle to show. The column width and align problem is a critical issue currently so that I've planed a new dom structure for react-bootstrap-table. In addition, I think I will try to implement this feature after my new plan completely. So I suggest you to handle hidden props on your state and custom toggle on your component. Feel free to discuss with me

    — Reply to this email directly or view it on GitHub https://github.com/AllenFang/react-bootstrap-table/issues/299#issuecomment-189631670 .

    点赞 评论 复制链接分享
  • weixin_39601511 weixin_39601511 5月前

    , like I said, there is a problem : the column width can't be restored when toggle to show. The column width and align problem is a critical issue currently. And maybe I can't support this feature in near future. But the workaround for you is handle hidden props on your state and custom toggle on your component.

    btw, according to your error message, did you enable exportCSV?

    点赞 评论 复制链接分享
  • weixin_39884872 weixin_39884872 5月前

    I bought template with webpack settings and gulp tasks. They have development and production modes. If I run "gulp" (which is --dev by default) then this error occurs:

    save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a"), ^ TypeError: Cannot read property 'createElementNS' of undefined

    Can this error occur due to React Server Side Rendering ?

    Or is it webpack bundling process error ? (but who does call saveAs function then ?)

    On 8 March 2016 at 15:14, Allen notifications.com wrote:

    https://github.com/lu44anno, like I said, there is a problem : the column width can't be restored when toggle to show. The column width and align problem is a critical issue currently. And maybe I can't support this feature in near future. But the workaround for you is handle hidden props on your state and custom toggle on your component.

    btw, according to your error message, did you enable exportCSV?

    — Reply to this email directly or view it on GitHub https://github.com/AllenFang/react-bootstrap-table/issues/299#issuecomment-193818994 .

    点赞 评论 复制链接分享
  • weixin_39601511 weixin_39601511 5月前

    I bought template with webpack settings and gulp tasks

    what's means?

    Can this error occur due to React Server Side Rendering ?

    I think this is the real problem

    I'll check this out, btw, could you give me a repo or example to reproduce this issue?

    点赞 评论 复制链接分享

相关推荐