antd table without useTable

how do i set the view elements per page on an antd Table

14 Replies

kapa.ai•14mo ago

Hi @royercross. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To set the view elements per page on an Ant Design Table in a refine application, you can use the setPageSize method provided by the useTable hook. This method is used to set the current pageSize, and every change in the pageSize will trigger a new request to the data provider. Here is an example of how you might use it:

const {
    tableProps,
    setPageSize,
    // other returned properties...
} = useTable<TUser>();

// Call setPageSize function with the desired number of items per page
setPageSize(10);

const {
    tableProps,
    setPageSize,
    // other returned properties...
} = useTable<TUser>();

// Call setPageSize function with the desired number of items per page
setPageSize(10);

Remember that by default, pagination happens on the server side. If you want to do pagination handling on the client side, you can pass the pagination.mode property and set it to "client". Also, you can disable the pagination by setting the "off". For more details, you can refer to the refine documentation (https://refine.dev/docs/api-reference/antd/hooks/table/useTable) and the TanStack Table documentation (https://tanstack.com/table/v8). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

<@210531867777171456> kapa.ai is still learning and improving, please let us know how it did by reacting below

ratty-blush•14mo ago

i wanna do it without useTable <Table dataSource={tableData} rowKey="id" > @kapa.ai

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you want to set the number of items per page without using the useTable hook, you can do so by using the pagination prop of the Ant Design Table component. The pagination prop accepts an object where you can set the pageSize property to determine the number of items per page. Here's an example:

<Table 
  dataSource={tableData} 
  rowKey="id"
  pagination={{ pageSize: 10 }} // Set the number of items per page
/>

<Table 
  dataSource={tableData} 
  rowKey="id"
  pagination={{ pageSize: 10 }} // Set the number of items per page
/>

In this example, the table will display 10 items per page. You can adjust the pageSize value as needed. For more information, you can refer to the Ant Design Table documentation (https://ant.design/components/table/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

<@210531867777171456> kapa.ai is still learning and improving, please let us know how it did by reacting below

ratty-blush•14mo ago

how do i add a client side name search on antd table @kapa.ai

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To add a client-side name search on an Ant Design Table in a refine application, you can use the filters prop of the Ant Design Table.Column component. You can set the filters.mode to "off" to disable server-side filtering and handle filtering on the client side. Here's an example:

import { Table } from "antd";  

const ListPage = () => {  
  const data = [
    // your data here
  ];

  const handleSearch = (selectedKeys, confirm, dataIndex) => {
    confirm();
    // handle your search logic here
  };

  const handleReset = clearFilters => {
    clearFilters();
    // reset your search logic here
  };

  const getColumnSearchProps = dataIndex => ({
    filterDropdown: ({
      setSelectedKeys,
      selectedKeys,
      confirm,
      clearFilters,
    }) => (
      <div style={{ padding: 8 }}>
        <Input
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e =>
            setSelectedKeys(e.target.value ? [e.target.value] : [])
          }
          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Button
          type="primary"
          onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
          icon={<SearchOutlined />}
          size="small"
          style={{ width: 90, marginRight: 8 }}
        >
          Search
        </Button>
        <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
          Reset
        </Button>
      </div>
    ),
    filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilter: (value, record) =>
      record[dataIndex]
        ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
        : '',
  });
return (  
    <Table dataSource={data} rowKey="id">  
      <Table.Column  
        dataIndex="name"  
        title="Name"  
        {...getColumnSearchProps('name')}
      />  
      {/* other columns here */}
    </Table>  
  );  
};

import { Table } from "antd";  

const ListPage = () => {  
  const data = [
    // your data here
  ];

  const handleSearch = (selectedKeys, confirm, dataIndex) => {
    confirm();
    // handle your search logic here
  };

  const handleReset = clearFilters => {
    clearFilters();
    // reset your search logic here
  };

  const getColumnSearchProps = dataIndex => ({
    filterDropdown: ({
      setSelectedKeys,
      selectedKeys,
      confirm,
      clearFilters,
    }) => (
      <div style={{ padding: 8 }}>
        <Input
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e =>
            setSelectedKeys(e.target.value ? [e.target.value] : [])
          }
          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Button
          type="primary"
          onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
          icon={<SearchOutlined />}
          size="small"
          style={{ width: 90, marginRight: 8 }}
        >
          Search
        </Button>
        <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
          Reset
        </Button>
      </div>
    ),
    filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilter: (value, record) =>
      record[dataIndex]
        ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
        : '',
  });
return (  
    <Table dataSource={data} rowKey="id">  
      <Table.Column  
        dataIndex="name"  
        title="Name"  
        {...getColumnSearchProps('name')}
      />  
      {/* other columns here */}
    </Table>  
  );  
};

In this example, a search input is added to the "Name" column. When you type in the input and press enter or click the "Search" button, the handleSearch function is called. When you click the "Reset" button, the handleReset function is called. For more information, you can refer to the Ant Design Table documentation (https://ant.design/components/table/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

<@210531867777171456> kapa.ai is still learning and improving, please let us know how it did by reacting below

deep-jade•14mo ago

I am also interested in this topic. Is it possible to do client side search in all columns? I know antd table supports per column filter/search. I wondering how to do a global search in all columns. thanks.

foreign-sapphire•14mo ago

Hey guys, You can checkout this for client-side filtering. https://refine.dev/docs/api-reference/antd/hooks/table/useTable/#how-can-i-handle-client-side-filtering

deep-jade•14mo ago

@salihozdemir thank you. For client-side filtering, it's like Antd table filtering/sorting, it's per column filter. I'd like to know if there's a client-side search among all columns. Ex: I can find a sub-string in every data grid. Because my backend db is firestore, it does not support substring search. What I can imagine is implement this at client side. But I don't know how to do this in refine framework. Do you think it's possible if I manipulate the datasource of the Table?

foreign-sapphire•14mo ago

Hey @henry_22928, Off course, you can do that. You can use the useTable hook with pagination.mode, filters.mode, and sorters.mode set to "off" and then you can use <Table> component's props to handle the filtering, sorting, and pagination client-side.

ratty-blush•14mo ago

That works if you wanna do search by column. Since i wanted to do a global search i made a custom form before my table.

  <Form layout="horizontal">
    <Row justify="start" gutter={[20, 0]}>
      <Col span={6}>
        <Form.Item name="q">
            <Input
                placeholder="Nombre"
                prefix={<Icons.SearchOutlined />}
                onKeyUp={(e) => {handleSearch(e)}}
            />
        </Form.Item>
      </Col>
    </Row>
  </Form>

  <Form layout="horizontal">
    <Row justify="start" gutter={[20, 0]}>
      <Col span={6}>
        <Form.Item name="q">
            <Input
                placeholder="Nombre"
                prefix={<Icons.SearchOutlined />}
                onKeyUp={(e) => {handleSearch(e)}}
            />
        </Form.Item>
      </Col>
    </Row>
  </Form>

` then i did a basic search function, which you can modify if you want a search by all fields

const handleSearch = (e: any) => {
  const name = e.target.value?.toLowerCase();
  const filteredObjects = tableData.filter((item: any) => item.name.toLowerCase().includes(name));
  setTableFilteredData(filteredObjects);
}

const handleSearch = (e: any) => {
  const name = e.target.value?.toLowerCase();
  const filteredObjects = tableData.filter((item: any) => item.name.toLowerCase().includes(name));
  setTableFilteredData(filteredObjects);
}

` Where

 setTableFilteredData(filteredObjects)

 setTableFilteredData(filteredObjects)

sets the table data source

 <Table dataSource={tableFilteredData} rowKey="id" pagination={{ pageSize: 50 }}>

 <Table dataSource={tableFilteredData} rowKey="id" pagination={{ pageSize: 50 }}>

deep-jade•14mo ago

Thank you guys! Be honest, I am new to refine. I don't know how to combine refine useTable and Table prop "datasource". I mean, in refine, the datasource is provided by useTable. How do I search for some keywords, then modify datasource and call hook api to let Table update its UI?