mirror of
https://github.com/apache/superset.git
synced 2026-08-04 13:02:41 +00:00
feat(build): migrate from Prettier to Oxfmt for performant code formatting (#42434)
This commit is contained in:
Đỗ Trọng Hải
@@ -33,141 +33,144 @@ A data table component with sorting, pagination, text wrapping, and empty state
|
||||
<StoryWithControls
|
||||
component="TableView"
|
||||
props={{
|
||||
accessor: "summary",
|
||||
Header: "Summary",
|
||||
sortable: true,
|
||||
id: 456,
|
||||
age: 10,
|
||||
name: "John Smith",
|
||||
summary: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id porta neque, a vehicula orci. Maecenas rhoncus elit sit amet purus convallis placerat in at nunc. Nulla nec viverra augue.",
|
||||
noDataText: "No data here",
|
||||
pageSize: 2,
|
||||
showRowCount: true,
|
||||
withPagination: true,
|
||||
scrollTopOnPagination: false,
|
||||
columns: [
|
||||
{
|
||||
accessor: "id",
|
||||
Header: "ID",
|
||||
sortable: true,
|
||||
id: "id"
|
||||
},
|
||||
{
|
||||
accessor: "age",
|
||||
Header: "Age",
|
||||
id: "age"
|
||||
},
|
||||
{
|
||||
accessor: "name",
|
||||
Header: "Name",
|
||||
id: "name"
|
||||
},
|
||||
{
|
||||
accessor: "summary",
|
||||
Header: "Summary",
|
||||
id: "summary"
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
id: 123,
|
||||
age: 27,
|
||||
name: "Emily",
|
||||
summary: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
||||
},
|
||||
{
|
||||
id: 321,
|
||||
age: 10,
|
||||
name: "Kate",
|
||||
summary: "Nam id porta neque, a vehicula orci."
|
||||
},
|
||||
{
|
||||
id: 456,
|
||||
age: 10,
|
||||
name: "John Smith",
|
||||
summary: "Maecenas rhoncus elit sit amet purus convallis placerat."
|
||||
}
|
||||
]
|
||||
}}
|
||||
accessor: 'summary',
|
||||
Header: 'Summary',
|
||||
sortable: true,
|
||||
id: 456,
|
||||
age: 10,
|
||||
name: 'John Smith',
|
||||
summary:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id porta neque, a vehicula orci. Maecenas rhoncus elit sit amet purus convallis placerat in at nunc. Nulla nec viverra augue.',
|
||||
noDataText: 'No data here',
|
||||
pageSize: 2,
|
||||
showRowCount: true,
|
||||
withPagination: true,
|
||||
scrollTopOnPagination: false,
|
||||
columns: [
|
||||
{
|
||||
accessor: 'id',
|
||||
Header: 'ID',
|
||||
sortable: true,
|
||||
id: 'id',
|
||||
},
|
||||
{
|
||||
accessor: 'age',
|
||||
Header: 'Age',
|
||||
id: 'age',
|
||||
},
|
||||
{
|
||||
accessor: 'name',
|
||||
Header: 'Name',
|
||||
id: 'name',
|
||||
},
|
||||
{
|
||||
accessor: 'summary',
|
||||
Header: 'Summary',
|
||||
id: 'summary',
|
||||
},
|
||||
],
|
||||
data: [
|
||||
{
|
||||
id: 123,
|
||||
age: 27,
|
||||
name: 'Emily',
|
||||
summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
|
||||
},
|
||||
{
|
||||
id: 321,
|
||||
age: 10,
|
||||
name: 'Kate',
|
||||
summary: 'Nam id porta neque, a vehicula orci.',
|
||||
},
|
||||
{
|
||||
id: 456,
|
||||
age: 10,
|
||||
name: 'John Smith',
|
||||
summary: 'Maecenas rhoncus elit sit amet purus convallis placerat.',
|
||||
},
|
||||
],
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "accessor",
|
||||
label: "Accessor",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: "Header",
|
||||
label: "Header",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: "sortable",
|
||||
label: "Sortable",
|
||||
type: "boolean"
|
||||
},
|
||||
{
|
||||
name: "id",
|
||||
label: "ID",
|
||||
type: "number"
|
||||
},
|
||||
{
|
||||
name: "age",
|
||||
label: "Age",
|
||||
type: "number"
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
label: "Name",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: "summary",
|
||||
label: "Summary",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: "noDataText",
|
||||
label: "No Data Text",
|
||||
type: "text",
|
||||
description: "Text displayed when the table has no data."
|
||||
},
|
||||
{
|
||||
name: "pageSize",
|
||||
label: "Page Size",
|
||||
type: "number",
|
||||
description: "Number of rows displayed per page."
|
||||
},
|
||||
{
|
||||
name: "showRowCount",
|
||||
label: "Show Row Count",
|
||||
type: "boolean",
|
||||
description: "Whether to display the total row count alongside pagination."
|
||||
},
|
||||
{
|
||||
name: "withPagination",
|
||||
label: "With Pagination",
|
||||
type: "boolean",
|
||||
description: "Whether to show pagination controls below the table."
|
||||
},
|
||||
{
|
||||
name: "scrollTopOnPagination",
|
||||
label: "Scroll Top On Pagination",
|
||||
type: "boolean",
|
||||
description: "Whether to scroll to the top of the table when changing pages."
|
||||
},
|
||||
{
|
||||
name: "emptyWrapperType",
|
||||
label: "Empty Wrapper Type",
|
||||
type: "select",
|
||||
description: "Style of the empty state wrapper."
|
||||
},
|
||||
{
|
||||
name: "initialPageIndex",
|
||||
label: "Initial Page Index",
|
||||
type: "number",
|
||||
description: "Initial page to display (zero-based)."
|
||||
}
|
||||
]}
|
||||
{
|
||||
name: 'accessor',
|
||||
label: 'Accessor',
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
name: 'Header',
|
||||
label: 'Header',
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
name: 'sortable',
|
||||
label: 'Sortable',
|
||||
type: 'boolean',
|
||||
},
|
||||
{
|
||||
name: 'id',
|
||||
label: 'ID',
|
||||
type: 'number',
|
||||
},
|
||||
{
|
||||
name: 'age',
|
||||
label: 'Age',
|
||||
type: 'number',
|
||||
},
|
||||
{
|
||||
name: 'name',
|
||||
label: 'Name',
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
name: 'summary',
|
||||
label: 'Summary',
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
name: 'noDataText',
|
||||
label: 'No Data Text',
|
||||
type: 'text',
|
||||
description: 'Text displayed when the table has no data.',
|
||||
},
|
||||
{
|
||||
name: 'pageSize',
|
||||
label: 'Page Size',
|
||||
type: 'number',
|
||||
description: 'Number of rows displayed per page.',
|
||||
},
|
||||
{
|
||||
name: 'showRowCount',
|
||||
label: 'Show Row Count',
|
||||
type: 'boolean',
|
||||
description:
|
||||
'Whether to display the total row count alongside pagination.',
|
||||
},
|
||||
{
|
||||
name: 'withPagination',
|
||||
label: 'With Pagination',
|
||||
type: 'boolean',
|
||||
description: 'Whether to show pagination controls below the table.',
|
||||
},
|
||||
{
|
||||
name: 'scrollTopOnPagination',
|
||||
label: 'Scroll Top On Pagination',
|
||||
type: 'boolean',
|
||||
description:
|
||||
'Whether to scroll to the top of the table when changing pages.',
|
||||
},
|
||||
{
|
||||
name: 'emptyWrapperType',
|
||||
label: 'Empty Wrapper Type',
|
||||
type: 'select',
|
||||
description: 'Style of the empty state wrapper.',
|
||||
},
|
||||
{
|
||||
name: 'initialPageIndex',
|
||||
label: 'Initial Page Index',
|
||||
type: 'number',
|
||||
description: 'Initial page to display (zero-based).',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
@@ -185,9 +188,24 @@ function Demo() {
|
||||
{ accessor: 'summary', Header: 'Summary', id: 'summary' },
|
||||
]}
|
||||
data={[
|
||||
{ id: 123, age: 27, name: 'Emily', summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
|
||||
{ id: 321, age: 10, name: 'Kate', summary: 'Nam id porta neque, a vehicula orci.' },
|
||||
{ id: 456, age: 10, name: 'John Smith', summary: 'Maecenas rhoncus elit sit amet purus convallis placerat.' },
|
||||
{
|
||||
id: 123,
|
||||
age: 27,
|
||||
name: 'Emily',
|
||||
summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
|
||||
},
|
||||
{
|
||||
id: 321,
|
||||
age: 10,
|
||||
name: 'Kate',
|
||||
summary: 'Nam id porta neque, a vehicula orci.',
|
||||
},
|
||||
{
|
||||
id: 456,
|
||||
age: 10,
|
||||
name: 'John Smith',
|
||||
summary: 'Maecenas rhoncus elit sit amet purus convallis placerat.',
|
||||
},
|
||||
]}
|
||||
initialSortBy={[{ id: 'name', desc: true }]}
|
||||
pageSize={2}
|
||||
@@ -263,22 +281,22 @@ function SortingDemo() {
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `accessor` | `string` | `"summary"` | - |
|
||||
| `Header` | `string` | `"Summary"` | - |
|
||||
| `sortable` | `boolean` | `true` | - |
|
||||
| `id` | `number` | `456` | - |
|
||||
| `age` | `number` | `10` | - |
|
||||
| `name` | `string` | `"John Smith"` | - |
|
||||
| `summary` | `string` | `"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id porta neque, a vehicula orci. Maecenas rhoncus elit sit amet purus convallis placerat in at nunc. Nulla nec viverra augue."` | - |
|
||||
| `noDataText` | `string` | `"No data here"` | Text displayed when the table has no data. |
|
||||
| `pageSize` | `number` | `2` | Number of rows displayed per page. |
|
||||
| `showRowCount` | `boolean` | `true` | Whether to display the total row count alongside pagination. |
|
||||
| `withPagination` | `boolean` | `true` | Whether to show pagination controls below the table. |
|
||||
| `scrollTopOnPagination` | `boolean` | `false` | Whether to scroll to the top of the table when changing pages. |
|
||||
| `columns` | `any` | `[{"accessor":"id","Header":"ID","sortable":true,"id":"id"},{"accessor":"age","Header":"Age","id":"age"},{"accessor":"name","Header":"Name","id":"name"},{"accessor":"summary","Header":"Summary","id":"summary"}]` | - |
|
||||
| `data` | `any` | `[{"id":123,"age":27,"name":"Emily","summary":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"id":321,"age":10,"name":"Kate","summary":"Nam id porta neque, a vehicula orci."},{"id":456,"age":10,"name":"John Smith","summary":"Maecenas rhoncus elit sit amet purus convallis placerat."}]` | - |
|
||||
| Prop | Type | Default | Description |
|
||||
| ----------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
|
||||
| `accessor` | `string` | `"summary"` | - |
|
||||
| `Header` | `string` | `"Summary"` | - |
|
||||
| `sortable` | `boolean` | `true` | - |
|
||||
| `id` | `number` | `456` | - |
|
||||
| `age` | `number` | `10` | - |
|
||||
| `name` | `string` | `"John Smith"` | - |
|
||||
| `summary` | `string` | `"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id porta neque, a vehicula orci. Maecenas rhoncus elit sit amet purus convallis placerat in at nunc. Nulla nec viverra augue."` | - |
|
||||
| `noDataText` | `string` | `"No data here"` | Text displayed when the table has no data. |
|
||||
| `pageSize` | `number` | `2` | Number of rows displayed per page. |
|
||||
| `showRowCount` | `boolean` | `true` | Whether to display the total row count alongside pagination. |
|
||||
| `withPagination` | `boolean` | `true` | Whether to show pagination controls below the table. |
|
||||
| `scrollTopOnPagination` | `boolean` | `false` | Whether to scroll to the top of the table when changing pages. |
|
||||
| `columns` | `any` | `[{"accessor":"id","Header":"ID","sortable":true,"id":"id"},{"accessor":"age","Header":"Age","id":"age"},{"accessor":"name","Header":"Name","id":"name"},{"accessor":"summary","Header":"Summary","id":"summary"}]` | - |
|
||||
| `data` | `any` | `[{"id":123,"age":27,"name":"Emily","summary":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"id":321,"age":10,"name":"Kate","summary":"Nam id porta neque, a vehicula orci."},{"id":456,"age":10,"name":"John Smith","summary":"Maecenas rhoncus elit sit amet purus convallis placerat."}]` | - |
|
||||
|
||||
## Import
|
||||
|
||||
|
||||
Reference in New Issue
Block a user