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

feat: Adds virtualization option to antd based Table component #22135

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 80 additions & 1 deletion superset-frontend/src/components/Table/Table.overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -183,14 +183,93 @@ The table displays a set number of rows at a time, the user navigates the table
The default page size and page size options for the menu are configurable via the `pageSizeOptions` and `defaultPageSize` props.
NOTE: Pagination controls will only display when the data for the table has more records than the default page size.

<Story id="design-system-components-table-examples--many-columns" />
<Story id="design-system-components-table-examples--pagination" />

```
<Table pageSizeOptions={[5, 10, 15, 20, 25] defaultPageSize={10} />
```

---

### Server Pagination

The table can be configured for async data fetching to get partial data sets while showing pagination controls that let the user navigate through data.
To override the default paging, which uses `data.length` to determine the record count, populate the `recordCount` prop with the total number of records
contained in the dataset on the server being paged through. When the user navigates through the paged data it will invoke the `onChange` callback
function enabling data fetching to occur when the user changes the page.

<Story id="design-system-components-table-examples--server-pagination" />

```
interface BasicData {
name: string;
category: string;
price: number;
description?: string;
key: number;
}

const generateData = (startIndex: number, pageSize: number): BasicData[] => {
const data: BasicData[] = [];
for (let i = 0; i < pageSize; i += 1) {
const recordIndex = startIndex + i;
data.push({
key: recordIndex,
name: `Dynamic Record ${recordIndex}`,
category: 'Disk Storage',
price: recordIndex * 2.59,
description: 'A random description',
});
}
return data;
};

const ServerPaginationTable = () => {
const [data, setData] = useState(generateData(0, 5));
const [loading, setLoading] = useState(false);
// This should really be calculated server side for the data set being paged through
const recordCount = 5000;

const handleChange = (pagination: TablePaginationConfig) => {
const pageSize = pagination?.pageSize ?? 5;
const current = pagination?.current ?? 0;
setLoading(true);
// simulate a fetch
setTimeout(() => {
setData(generateData(current * pageSize, pageSize));
setLoading(false);
}, 1000);
};

return (
<Table
columns: paginationColumns,
size: TableSize.SMALL,
pageSizeOptions: ['10', '20', '50'],
defaultPageSize: 10,
data={data}
recordCount={5000}
onChange={handleChange}
loading={loading}
/>
);
};
```

---

### Virtualization for Performance

Table virtualization can enable viewing data with many columns and/or rows.
Virtualization can be enabled via the `virtualize` prop.

NOTE: Row event handlers will be ignored when table is running with `virtualize={true}`.
Support for row event handlers may be added in future versions of the Table.

<Story id="design-system-components-table-examples--virtualized-performance" />

---

## Integration Checklist

The following specifications are required every time a table is used. These choices should be intentional based on the specific user needs for the table instance.
Expand Down
Loading