collapse table rows with animations

[shahab65]

hello and thank you for you job. I have a question please help me if you had time.

I have created a table that when user clicks on one of it's rows another table will open below it . this is my code:

`import React from 'react'; import Table from 'rc-table'; import 'rc-table/assets/index.css';

import Animate from 'rc-animate'; import 'rc-table/assets/animation.css'; const AnimateBody = props => <Animate transitionName="move" component="tbody" {...props} />;

class BillList extends React.Component{

columns = [ { title: 'code', dataIndex: 'code', key: 'a', width: 100 }, { title: 'date', dataIndex: 'date', key: 'b', width: 100 }, { title: ' amount', dataIndex: 'amount', key: 'c', width: 100 }, { title: 'status', dataIndex: 'status', key: 'x', width:100 }, ];

tableData = [ { key: 0, code: '123',date:'1/12/97', amount:'20,000', status:' no' }, { key: 1, code: '123',date:'1/12/97', amount:'20,000', status:' yes' }, { key: 2, code: '123',date:'1/12/97', amount:'20,000', status:' no' }, { key: 3, code: '123',date:'1/12/97', amount:'20,000', status:' yes' }, { key: 4, code: '123',date:'1/12/97', amount:'20,000', status:' no' }, { key: 5, code: '123',date:'1/12/97', amount:'20,000', status:'yes' }, ];

sub_columns = [ { title: 'name', dataIndex: 'name', key: 'a', width: 100 }, { title: 'phi', dataIndex: 'phi', key: 'b', width: 100 }, { title: 'value ', dataIndex: 'masraf', key: 'c', width: 100 }, { title: 'total value ', dataIndex: 'kol', key: 'x', width:100 }, ];

sub_tableData = [ { key: 0, name: 'cpu',phi:'100,000', masraf:'60,000', kol:'50,000' }, { key: 1, name: 'ram',phi:'100,000', masraf:'60,000', kol:'50,000' }, { key: 2, name: 'disk',phi:'100,000', masraf:'60,000', kol:'50,000' }, ];

render(){ const subTable = ()=>{ return ( <Table style={{background:"yellow"}} columns={this.sub_columns} data={this.sub_tableData} components={{ body: { wrapper: AnimateBody }, }}/> ) } return(

subTable(record)} columns={this.columns} data={this.tableData} />

)

} }

export default BillList`

this works good for me but I want table to expand with animation like slideUp and slideDown in jquery. another example would be this: https://codepen.io/ayoungh/pen/xqRbeR

can you please tell me how can I add animation to my table?

thanks again

fgiarritiello commented 5 years ago

has anyone achieved this?

shahab65 commented 5 years ago

has anyone achieved this?

I could do this with help of below library: https://github.com/frankwallis/react-slidedown

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[fgiarritiello]

has anyone achieved this?

[shahab65]

has anyone achieved this?

I could do this with help of below library: https://github.com/frankwallis/react-slidedown