---
title: 简洁用法
order: 1
---

````jsx
import React, { useState, useRef} from 'react';
import ReactDOM from 'react-dom';
import BspFormList from '@alibsp/form-list';
import ListMap from './listMap';
import { getTableData, getSchema } from './getData.tsx';
import '@alifd/next/index.scss'
const schema = getSchema()

function App() {
  const [status, setStatus] = useState(4);
  const [columns, setColumns] = useState(schema.tableSchema.props.columns)
  const ref = useRef()


  const actions = [
    {
      component: () => (
        <div >YYYY</div>
      ),
    },
  ];
  
  
  return (
    <div>
      <div onClick={() => {setStatus(6)}}>测试1</div>
      <div onClick={() => {ref.current.refresh()}}>测试2</div>
      <div onClick={() => {
        setColumns([
        {
          title: "name",
          dataIndex: "name.last",
          width: 140,
          cell: (value) =>  value + '【自定义cell】',
        }])}}>测试3</div>
        <div onClick={() => {
          ref.current.updateColumns([
            {
            title: "time",
            dataIndex: "time",
            width: 140,
            type: "Date",
        }])
        }}>测试4</div>
      <BspFormList
        ref={ref}
        filter={schema.filterSchema.props.dataSource}
        columns={columns}
        fetchData={getTableData}
        actions = {actions}
        {...ListMap}
        filterProps={{
          defaultExpended: false,
          // cacheParamsKey: 'custom_My_LIST'
        }}
        paginationProps={
          {
            pageSize: 5,
          }
        }
        tableShuttle={{
          expandedRowRender:(record) => record.time,
          // hasExpandedRowCtrl: false,
          onLocalFilterData: (data) => {
            return data.filter(item => item.id > status)
          }
        }}
      />
    </div>
  );
  
}

ReactDOM.render((
  <App />
), mountNode);
````

```css
#usage {
  width: 100%
}
```